/* eslint-disable @next/next/no-img-element */
import { Settings } from '@mui/icons-material';
import { Box, Icon, IconButton, Stack, Typography, styled } from '@mui/material';
import { useLocale } from 'next-intl';
import { usePathname, useRouter } from 'next/navigation';
import React from 'react';

type Props = {};

const StyledBox = styled(Box)`
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #fff;
    box-shadow: 12px 12px 24px 0px rgba(0, 0, 0, 0.04);
    padding: 27px 40px;

    .user-name {
        color: #000;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 32px;
        letter-spacing: 1.44px;
    }

    .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;
    }
`;

const DashboardHeader = (props: Props) => {
    const language = useLocale();
    const router = useRouter();
    const pathname = usePathname();

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

    return (
        <StyledBox>
            {/* <Typography className='user-name'>Salom, Qurbonmurod</Typography> */}

            <Stack direction={'row'} spacing={1.5}>
                <Stack direction={'row'} justifyContent={'center'} alignItems={'center'} spacing={1}>
                    <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>
        </StyledBox>
    );
};

export default DashboardHeader;

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';
        }
    }
}
