import Head from 'next/head'
import { ReactNode, useContext, useEffect, useState } from 'react'
import Header from '../Header'
import styles from './style.module.css'
import { Modal } from 'antd'
import AppContext from '../hooks/createContext'
import { IS_LOCAL, LOG_URL } from '@/common/constans/international'
import { IS_EN } from '@/common/constans/international'
import { useTranslation } from 'next-i18next'
import { browserCheck } from '@/common/utils'
import RequesLoading from '../RequestLoading'
import MobileHeader from '../MobileHeader'
import { PAGE_FAVICON, PAGE_TITLE } from '../../common/constans/international'
import { useRouter } from 'next/router'

type Iprops = {
    children: ReactNode
    title?: string
}

const Layout = ({ children, title = PAGE_TITLE }: Iprops) => {
    const { t } = useTranslation('common')
    const {
        requestLoading: [requestLoading],
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    } = useContext(AppContext)!

    const [isMobile, setIsMobile] = useState(false)
    const [browserStatus, setBrowserStatus] = useState<boolean>(false)
    const [noticeShow, setNoticeShow] = useState<boolean>(false)

    const isWorkspace = useRouter().pathname == '/workspace'

    useEffect(() => {
        if (!IS_LOCAL && IS_EN) {
            setNoticeShow(true)
        }
    }, [])

    useEffect(() => {
        const isMobileDevice = /(android|iphone|ipad|mobile)/i.test(navigator.userAgent)
        setIsMobile(isMobileDevice)
        const check = browserCheck()
        setBrowserStatus(check)
        if (typeof window !== 'undefined') {
            import('@/common/Logger').then(({ logger }) => {
                logger.setGlobalConfig({
                    logUrl: LOG_URL,
                })
            })
        }
    }, [])

    return (
        <div>
            <Head>
                <title>{title}</title>
                <meta name="baidu-site-verification" content="codeva-p7MgIbmFl0" />
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
                />
                {process.env.NEXT_PUBLIC_I18N == 'true' ? (
                    <>
                        <meta name="title" content="10x model and product photos with AI studio" />
                        <meta
                            name="description"
                            content="Instantly generate high-quality images, supercharging e-commerce with generative AI"
                        />
                        <meta
                            name="keywords"
                            content="AI studio, AI model photo, AI Product photo"
                        />

                        <meta
                            name="og:title"
                            content="10x model and product photos with AI studio"
                        />
                        <meta name="og:url" content="https://www.weshop.ai/" />
                        <meta name="og:type" content="website" />
                        <meta
                            name="og:description"
                            content="Instantly generate high-quality images, supercharging e-commerce with generative AI"
                        />
                        <meta
                            name="og:image"
                            content="https://ai-global-image.weshop.com/homepageshow.png"
                        />
                        <meta
                            name="twitter:title"
                            content="10x model and product photos with AI studio"
                        />
                        <meta name="twitter:card" content="summary" />
                        <meta name="twitter:domain" content="weshop.ai" />
                        <meta
                            name="twitter:image"
                            content="https://ai-global-image.weshop.com/homepageshow.png"
                        />
                        <meta
                            name="twitter:description"
                            content="Instantly generate high-quality images, supercharging e-commerce with generative AI"
                        />
                    </>
                ) : (
                    <>
                        <meta
                            name="description"
                            content="WeShop唯象妙境是国内首款AI商拍工具，专注电商产品图片的智能生成。品牌方无需再受到模特、经纪、摄影、后期、场租、机酒的限制，在高效产出优质商品图的同时，还能大幅节约拍摄成本。用WeShop唯象妙境，鼠标就是快门，点击即看成片。"
                        />
                    </>
                )}

                <link rel="icon" href={PAGE_FAVICON} />
            </Head>
            {isMobile ? <MobileHeader></MobileHeader> : <Header></Header>}

            <main className={styles.main}>
                <Modal open={browserStatus} closable={false} maskClosable={false} footer={null}>
                    <p>{t('bowserHint')}</p>
                </Modal>
                <div
                    style={{
                        marginTop:
                            isWorkspace && noticeShow ? 'calc(var(--HeaderHeight) + 48px)' : '0',
                    }}
                >
                    {children}
                </div>
                {requestLoading ? <RequesLoading></RequesLoading> : null}
            </main>
        </div>
    )
}

export default Layout
