import { CalculatorModal } from '@/components/common/Calculator/Calculator';
import { CheckOrderModal } from '@/components/common/CheckOrder';
import Container from '@/components/common/Container';
import NextLink from '@/components/common/NextLink';
import { pageLinks } from '@/helpers/constants';
import { useMyTranslation } from '@/hooks/useMyTranslation';
import { Box, Drawer, IconButton, Stack, Typography, css, styled, Button } from '@mui/material';
import { useLocale } from 'next-intl';
import { Close, Menu } from '@mui/icons-material';
import { usePathname, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import LogoSvg from '@/components/common/LogoSvg';
import { VerifyPhoneModal } from '@/components/common/VerifyPhoneModal';
import { IRegisterModal } from '@/components/layout/landing-layout/header/components/IRegisterModal';
import ILoginBtn from '@/components/layout/landing-layout/header/components/ILoginBtn';
import IDollarYuan from '@/components/layout/landing-layout/header/components/IDollarYuan';

const StyledHeader = styled('header')`
    z-index: 999;
    position: sticky;
    left: 0;
    top: -43px;

    .top-header {
        background-color: #07275c;
        padding: 8px 0;
        color: #fff;
    }

    .top-header-link {
        color: #fff;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 142.857% */
        letter-spacing: 0.14px;
    }

    .social-link {
        color: #fff;
    }

    // ---------------------------------

    .main-header {
        background: #e5eef6;
        padding: 16px 0;

        .logo-link {
            color: #003a77;
            font-size: 28px;
            font-style: normal;
            font-weight: 700;
            line-height: 36px; /* 128.571% */
        }

        .nav-link {
            color: #07275c;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 20px; /* 125% */

            &:hover {
                text-decoration: underline;
            }
        }

        .lng-img {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
            border-radius: 50%;
            overflow: hidden;
            object-fit: cover;
        }

        .lng-select {
            border: 0;
            background-color: transparent;
            color: #07275c;
        }

        .calc-btn {
            display: flex;
            padding: 10px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            border-radius: 4px;
            border: 2px solid #0076be;
            background: #fff;
            cursor: pointer;

            &:hover {
                opacity: 0.8;
            }

            &:active {
                opacity: 0.6;
            }
        }

        .check-btn {
            display: flex;
            padding: 13px 12px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            border-radius: 4px;
            background: #0076be;
            color: #fff;
            transition: opacity 0.3s ease;
            border: 0;
            cursor: pointer;

            &:hover {
                opacity: 0.8;
            }

            &:active {
                opacity: 0.6;
            }
        }
    }

    ${({ theme }) => css`
        ${theme.breakpoints.down('md')} {
            top: 0;

            .main-header {
                padding: 10px 0;
            }
        }
    `}
`;

const StyledDrawer = styled(Drawer)`
    .logo-link {
        color: #003a77;
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: 36px; /* 128.571% */
    }

    .nav-link {
        color: #07275c;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px; /* 125% */

        &:hover {
            text-decoration: underline;
        }
    }

    .lng-img {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        border-radius: 50%;
        overflow: hidden;
        object-fit: cover;
    }

    .lng-select {
        border: 0;
        background-color: transparent;
        color: #07275c;
    }

    .calc-btn {
        display: flex;
        padding: 10px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 4px;
        border: 2px solid #0076be;
        background: #fff;
        cursor: pointer;

        &:hover {
            opacity: 0.8;
        }

        &:active {
            opacity: 0.6;
        }
    }

    .check-btn {
        display: flex;
        padding: 13px 12px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 4px;
        background: #0076be;
        color: #fff;
        transition: opacity 0.3s ease;
        border: 0;
        cursor: pointer;

        &:hover {
            opacity: 0.8;
        }

        &:active {
            opacity: 0.6;
        }
    }
`;

type Props = {};

const Header = (props: Props) => {
    const t = useMyTranslation();
    const language = useLocale();
    const router = useRouter();
    const pathname = usePathname();
    const [isOpenMenu, setIsOpenMenu] = useState(false);
    const [modal, setModal] = useState<'calculator' | 'check_order' | 'verify_phone' | 'register' | null>(null);
    const [phoneNumber, setPhoneNumber] = useState('');

    const openCalculatorModal = () => {
        setModal('calculator');
    };

    const changePhone = (value: string) => {
        setPhoneNumber(value);
    };

    const openCheckOrderModal = () => {
        setModal('check_order');
    };

    const openVerifyPhoneModal = () => {
        setModal('verify_phone');
    };

    const closeModal = () => {
        setModal(null);
    };

    const changeLanguage = (lng: string) => {
        router.push(`/${lng}/${pathname.substring(3)}`, { scroll: false });
    };

    const openRegister = () => setModal('register');

    return (
        <StyledHeader>
            <Box
                className='top-header'
                display={{
                    xs: 'none',
                    md: 'block',
                }}
            >
                <Container>
                    <Stack direction={'row'} justifyContent={'space-between'}>
                        <Stack direction={'row'} spacing={1.5}>
                            <Stack direction={'row'} alignItems={'center'} spacing={1.5}>
                                <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'>
                                    <path
                                        d='M17.5 13.6833V16.6301C17.5 17.0676 17.1617 17.4306 16.7254 17.4614C16.3609 17.4872 16.0636 17.5 15.8333 17.5C8.4695 17.5 2.5 11.5305 2.5 4.16667C2.5 3.93642 2.51288 3.63906 2.53863 3.27458C2.56948 2.83823 2.93245 2.5 3.36988 2.5H6.31675C6.53065 2.5 6.7098 2.66202 6.73127 2.87483C6.75056 3.06589 6.76848 3.21928 6.78506 3.33502C6.95362 4.51227 7.29794 5.6328 7.79058 6.66919C7.86966 6.83554 7.81809 7.03466 7.66821 7.14172L5.86962 8.4265C6.9646 10.9843 9.01575 13.0354 11.5735 14.1304L12.8559 12.3349C12.9643 12.1832 13.1658 12.1311 13.3342 12.211C14.3705 12.7032 15.4909 13.0472 16.668 13.2153C16.783 13.2318 16.9354 13.2496 17.1252 13.2687C17.338 13.2902 17.5 13.4694 17.5 13.6833Z'
                                        fill='white'
                                    />
                                </svg>
                                <NextLink className='top-header-link' href='#'>
                                    +998 (99) 110 22 22
                                </NextLink>
                                <svg xmlns='http://www.w3.org/2000/svg' width='2' height='20' viewBox='0 0 2 20' fill='none'>
                                    <path d='M1 0L0.999999 20' stroke='white' stroke-width='2' />
                                </svg>
                                <NextLink className='top-header-link' href='#'>
                                    +86 (150) 2452 0047
                                </NextLink>
                            </Stack>
                            <Stack direction={'row'} alignItems={'center'} spacing={1.5}>
                                <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'>
                                    <path
                                        d='M2.49984 2.5H17.4998C17.9601 2.5 18.3332 2.8731 18.3332 3.33333V16.6667C18.3332 17.1269 17.9601 17.5 17.4998 17.5H2.49984C2.0396 17.5 1.6665 17.1269 1.6665 16.6667V3.33333C1.6665 2.8731 2.0396 2.5 2.49984 2.5ZM16.6665 6.0316L10.0597 11.9483L3.33317 6.01328V15.8333H16.6665V6.0316ZM3.75939 4.16667L10.0514 9.71833L16.2507 4.16667H3.75939Z'
                                        fill='white'
                                    />
                                </svg>
                                <NextLink className='top-header-link' href='#'>
                                    info@cpost.uz
                                </NextLink>
                            </Stack>
                        </Stack>

                        <Stack direction={'row'} spacing={2} display={'flex'} alignItems={'center'}>
                            <IDollarYuan />
                            {/*<Typography>1 USD = 7.1 Y</Typography>*/}
                            {/*<NextLink className='social-link'>*/}
                            {/*    <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'>*/}
                            {/*        <path*/}
                            {/*            d='M6.66536 2C4.0927 2 2 4.09464 2 6.66797V13.3346C2 15.9073 4.09464 18 6.66797 18H13.3346C15.9073 18 18 15.9054 18 13.332V6.66536C18 4.0927 15.9054 2 13.332 2H6.66536ZM14.6667 4.66667C15.0347 4.66667 15.3333 4.96533 15.3333 5.33333C15.3333 5.70133 15.0347 6 14.6667 6C14.2987 6 14 5.70133 14 5.33333C14 4.96533 14.2987 4.66667 14.6667 4.66667ZM10 6C12.206 6 14 7.794 14 10C14 12.206 12.206 14 10 14C7.794 14 6 12.206 6 10C6 7.794 7.794 6 10 6ZM10 7.33333C9.29276 7.33333 8.61448 7.61428 8.11438 8.11438C7.61428 8.61448 7.33333 9.29276 7.33333 10C7.33333 10.7072 7.61428 11.3855 8.11438 11.8856C8.61448 12.3857 9.29276 12.6667 10 12.6667C10.7072 12.6667 11.3855 12.3857 11.8856 11.8856C12.3857 11.3855 12.6667 10.7072 12.6667 10C12.6667 9.29276 12.3857 8.61448 11.8856 8.11438C11.3855 7.61428 10.7072 7.33333 10 7.33333Z'*/}
                            {/*            fill='white'*/}
                            {/*        />*/}
                            {/*    </svg>*/}
                            {/*</NextLink>*/}
                            {/*<NextLink className='social-link'>*/}
                            {/*    <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'>*/}
                            {/*        <path*/}
                            {/*            d='M6.66536 2C4.0927 2 2 4.09464 2 6.66797V13.3346C2 15.9073 4.09464 18 6.66797 18H13.3346C15.9073 18 18 15.9054 18 13.332V6.66536C18 4.0927 15.9054 2 13.332 2H6.66536ZM14.6667 4.66667C15.0347 4.66667 15.3333 4.96533 15.3333 5.33333C15.3333 5.70133 15.0347 6 14.6667 6C14.2987 6 14 5.70133 14 5.33333C14 4.96533 14.2987 4.66667 14.6667 4.66667ZM10 6C12.206 6 14 7.794 14 10C14 12.206 12.206 14 10 14C7.794 14 6 12.206 6 10C6 7.794 7.794 6 10 6ZM10 7.33333C9.29276 7.33333 8.61448 7.61428 8.11438 8.11438C7.61428 8.61448 7.33333 9.29276 7.33333 10C7.33333 10.7072 7.61428 11.3855 8.11438 11.8856C8.61448 12.3857 9.29276 12.6667 10 12.6667C10.7072 12.6667 11.3855 12.3857 11.8856 11.8856C12.3857 11.3855 12.6667 10.7072 12.6667 10C12.6667 9.29276 12.3857 8.61448 11.8856 8.11438C11.3855 7.61428 10.7072 7.33333 10 7.33333Z'*/}
                            {/*            fill='white'*/}
                            {/*        />*/}
                            {/*    </svg>*/}
                            {/*</NextLink>*/}
                            {/*<NextLink className='social-link'>*/}
                            {/*    <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'>*/}
                            {/*        <path*/}
                            {/*            d='M2.42918 9.84011C7.66585 7.53636 14.4425 4.72761 15.3779 4.33886C17.8317 3.32136 18.5846 3.51636 18.2092 5.76969C17.9396 7.38928 17.1617 12.7514 16.5417 16.0889C16.1738 18.068 15.3483 18.3026 14.0504 17.4464C13.4263 17.0343 10.2758 14.9509 9.5921 14.4618C8.96793 14.0159 8.1071 13.4797 9.18668 12.4234C9.57085 12.0472 12.0892 9.64261 14.0513 7.77094C14.3083 7.52511 13.9854 7.12136 13.6888 7.31844C11.0442 9.07219 7.37751 11.5064 6.91085 11.8234C6.20585 12.3022 5.52876 12.5218 4.31335 12.1726C3.39501 11.9089 2.49793 11.5943 2.14876 11.4743C0.804182 11.0126 1.12335 10.4147 2.42918 9.84011Z'*/}
                            {/*            fill='white'*/}
                            {/*        />*/}
                            {/*    </svg>*/}
                            {/*</NextLink>*/}
                            <ILoginBtn openVerifyPhoneModal={openVerifyPhoneModal} />
                        </Stack>
                    </Stack>
                </Container>
            </Box>
            <div className='main-header'>
                <Container>
                    <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'} spacing={7.5}>
                        <NextLink className='logo-link' href={pageLinks.home}>
                            <LogoSvg />
                        </NextLink>
                        <Stack direction={'row'} alignItems={'center'} spacing={2} display={{ xs: 'none', md: 'flex' }}>
                            <NextLink className='nav-link' href={pageLinks.home}>
                                {t('home')}
                            </NextLink>
                            <NextLink className='nav-link' href={pageLinks.home + '#about'}>
                                {t('about_us')}
                            </NextLink>
                            <NextLink className='nav-link' href={pageLinks.home + '#services'}>
                                {t('services')}
                            </NextLink>
                            {/* <NextLink className='nav-link' href={pageLinks.news}>
                                {t('news')}
                            </NextLink> */}
                            <NextLink className='nav-link' href={pageLinks.home + '#tariffs'}>
                                {t('tariffs')}
                            </NextLink>
                            <NextLink className='nav-link' href={pageLinks.home + '#contacts'}>
                                {t('contacts')}
                            </NextLink>
                        </Stack>
                        <Stack direction={'row'} alignItems={'center'} spacing={2}>
                            <Stack direction={'row'} alignItems={'center'} spacing={2} display={{ xs: 'none', sm: 'flex' }}>
                                <img className='lng-img' src={getLanguageImage(language)} alt='' />

                                <select
                                    className='lng-select'
                                    value={language}
                                    onChange={event => {
                                        changeLanguage(event.target.value);
                                    }}
                                >
                                    <option value='uz'>UZ</option>
                                    <option value='ru'>RU</option>
                                    <option value='en'>EN</option>
                                    <option value='cn'>中國人</option>
                                </select>

                                <button className='calc-btn' onClick={openCalculatorModal}>
                                    <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'>
                                        <path
                                            d='M2 0H18C18.5523 0 19 0.44772 19 1V19C19 19.5523 18.5523 20 18 20H2C1.44772 20 1 19.5523 1 19V1C1 0.44772 1.44772 0 2 0ZM3 2V18H17V2H3ZM5 4H15V8H5V4ZM5 10H7V12H5V10ZM5 14H7V16H5V14ZM9 10H11V12H9V10ZM9 14H11V16H9V14ZM13 10H15V16H13V10Z'
                                            fill='#0076BE'
                                        />
                                    </svg>
                                </button>

                                <button className='check-btn' onClick={openCheckOrderModal}>
                                    {t('check_order')}
                                </button>
                            </Stack>

                            <IconButton
                                sx={{
                                    display: { xs: 'flex', md: 'none' },
                                }}
                                onClick={() => setIsOpenMenu(p => !p)}
                            >
                                <Menu />
                            </IconButton>
                        </Stack>
                    </Stack>
                </Container>
            </div>

            {burgerMenu()}
            <CalculatorModal onClose={closeModal} open={modal === 'calculator'} />
            <CheckOrderModal onClose={closeModal} open={modal === 'check_order'} />
            <VerifyPhoneModal changePhone={changePhone} openRegister={openRegister} onClose={closeModal} phoneNumber={phoneNumber} open={modal === 'verify_phone'} />
            <IRegisterModal phoneNumber={phoneNumber} onClose={closeModal} open={modal === 'register'} />
        </StyledHeader>
    );

    function burgerMenu() {
        return (
            <StyledDrawer
                open={isOpenMenu}
                onClose={() => setIsOpenMenu(false)}
                anchor='right'
                sx={{
                    '.MuiPaper-root': {
                        padding: '10px 12px',
                        width: '100%',
                        maxWidth: '400px',
                    },
                }}
            >
                <Stack spacing={2}>
                    <Stack direction={'row'} alignItems={'center'} justifyContent={'space-between'}>
                        <NextLink className='logo-link' href={pageLinks.home}>
                            <LogoSvg />
                        </NextLink>
                        <IconButton onClick={() => setIsOpenMenu(false)}>
                            <Close />
                        </IconButton>
                    </Stack>

                    <NextLink className='nav-link' href={pageLinks.home} onClick={() => setIsOpenMenu(false)}>
                        {t('home')}
                    </NextLink>
                    <NextLink className='nav-link' href={pageLinks.home + '#about'} onClick={() => setIsOpenMenu(false)}>
                        {t('about_us')}
                    </NextLink>
                    <NextLink className='nav-link' href={pageLinks.home + '#services'} onClick={() => setIsOpenMenu(false)}>
                        {t('services')}
                    </NextLink>
                    {/* <NextLink className='nav-link' href={pageLinks.news} onClick={() => setIsOpenMenu(false)}>
                        {t('news')}
                    </NextLink> */}
                    <NextLink className='nav-link' href={pageLinks.home + '#tariffs'} onClick={() => setIsOpenMenu(false)}>
                        {t('tariffs')}
                    </NextLink>
                    <NextLink className='nav-link' href={pageLinks.home + '#contacts'} onClick={() => setIsOpenMenu(false)}>
                        {t('contacts')}
                    </NextLink>

                    <Stack spacing={2} display={{ xs: 'flex' }}>
                        <Stack spacing={2} display={{ sm: 'none' }}>
                            <button className='calc-btn' onClick={openCalculatorModal}>
                                <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'>
                                    <path
                                        d='M2 0H18C18.5523 0 19 0.44772 19 1V19C19 19.5523 18.5523 20 18 20H2C1.44772 20 1 19.5523 1 19V1C1 0.44772 1.44772 0 2 0ZM3 2V18H17V2H3ZM5 4H15V8H5V4ZM5 10H7V12H5V10ZM5 14H7V16H5V14ZM9 10H11V12H9V10ZM9 14H11V16H9V14ZM13 10H15V16H13V10Z'
                                        fill='#0076BE'
                                    />
                                </svg>
                            </button>

                            <button className='check-btn' onClick={openCheckOrderModal}>
                                {t('check_order')}
                            </button>
                        </Stack>

                        <button className='check-btn' onClick={openVerifyPhoneModal}>
                            <svg width='18' height='18' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
                                <path
                                    d='M8 7C9.65685 7 11 5.65685 11 4C11 2.34315 9.65685 1 8 1C6.34315 1 5 2.34315 5 4C5 5.65685 6.34315 7 8 7Z'
                                    fill='#fff'
                                />
                                <path d='M14 12C14 10.3431 12.6569 9 11 9H5C3.34315 9 2 10.3431 2 12V15H14V12Z' fill='#fff' />
                            </svg>
                            <span>Hisobga Kirish</span>
                        </button>

                        <Stack display={{ sm: 'none' }} direction={'row'} justifyContent={'flex-start'} alignItems={'center'}>
                            <img className='lng-img' src={getLanguageImage(language)} alt='' />

                            <select
                                className='lng-select'
                                value={language}
                                onChange={event => {
                                    changeLanguage(event.target.value);
                                }}
                            >
                                <option value='uz'>UZ</option>
                                <option value='ru'>RU</option>
                                <option value='en'>EN</option>
                                <option value='cn'>中國人</option>
                            </select>
                        </Stack>
                    </Stack>
                </Stack>
            </StyledDrawer>
        );
    }
};

export default Header;

function getLanguageImage(lang: string) {
    switch (lang) {
        case 'uz': {
            return '/static/icons/uz-flag.png';
        }
        case 'en': {
            return '/static/icons/en-flag.png';
        }
        case 'ru': {
            return '/static/icons/ru-flag.webp';
        }
        case 'cn': {
            return '/static/icons/cn-flag.png';
        }
        default: {
            return '/static/icons/uz-flag.png';
        }
    }
}
