import React from "react"
import { config } from "./config"
import { get_settings } from './api'
import { ImTwitter, ImTelegram, ImFacebook, ImWhatsapp } from "react-icons/im"
import { FiHome, FiTrendingUp, FiLock } from 'react-icons/fi'
import { useTranslation } from "react-i18next"

const AppContext = React.createContext(null)

export const useApp = () => {
    return React.useContext(AppContext)
}

let SOCIALS = [
    { name: 'telegram', icon: ImTelegram, path: 'https://telegram.org', enabled: false },
    { name: 'twitter', icon: ImTwitter, path: 'https://twitter.com', enabled: false },
    { name: 'facebook', icon: ImFacebook, path: 'https://facebook.com', enabled: false },
    { name: 'whatsapp', icon: ImWhatsapp, path: 'https://whatsapp.com', enabled: true },
]

export const AppContextProvider = ({ children }) => {
    const { t } = useTranslation()

    const [address, setAddress] = React.useState('')
    // from settings
    const [title, setTitle] = React.useState('')
    const [logo, setLogo] = React.useState('')
    const [banners, setBanners] = React.useState([])
    const [lockImg, setLockImg] = React.useState('')

    const [socials, setSocials] = React.useState(SOCIALS)

    const [bannerLink, setBannerLink] = React.useState('')
    const [rewards, setRewards] = React.useState([])
    const [appAddress, setAppAddress] = React.useState('')
    const [appKey, setAppKey] = React.useState('')
    const [kefuUrl, setKefuUrl] = React.useState('')

    const menuItems = [
        { name: t('home'), icon: FiHome, path: '/home', enabled: true },
        { name: t('farm'), icon: FiTrendingUp, path: '/farm', enabled: true },
        { name: t('staking'), icon: FiLock, path: '/staking', enabled: true },
    ]

    const docItems = [
        { name: t('announcement'), icon: '', path: '/ann', enabled: true },
        { name: t('faq'), icon: '', path: '/faq', enabled: true },
        { name: t('tutorial'), icon: '', path: '/tut', enabled: true },
    ]

    React.useEffect(() => {
        console.debug('should be once')

        get_settings().then((res) => {
            const o = res.data.other
            const s = res.data.system
            const b = res.data.base

            setTitle(o.title)
            document.title = o.title + ' - DeFi platform for professor'

            let banr = []
            o.banner?.forEach((item) => {
                banr.push(config.ENDPOINT + 'upload/' + item)
            })

            setBanners(banr)
            setLogo(config.ENDPOINT + 'upload/' + o.logo_url)

            setLockImg(config.ENDPOINT + 'upload/' + o.lock_url)

            setBannerLink(s.pic_url)

            SOCIALS[0].path = b.telegram
            SOCIALS[1].path = b.twitter
            SOCIALS[2].path = b.facebook
            SOCIALS[3].path = b.whatsapp

            setSocials(SOCIALS)
            setKefuUrl(s.kefu_url)
            setRewards(s.reward)
            setAppAddress(s.app_address)
            setAppKey(s.app_key)

        }).catch(err => {
            console.error('get_settings() error: ' + err.message)
        })

    }, [])

    return (
        <AppContext.Provider value={{
            address,
            setAddress,
            logo,
            lockImg,
            title,
            banners,
            bannerLink,
            rewards,
            appAddress,
            appKey,
            socials,
            kefuUrl,
            menuItems,
            docItems,
        }}>
            {children}
        </AppContext.Provider>
    )
}