import ReactSelect from 'react-select';
import { Icon, Stack } from '@mui/material';
import { usePathname, useRouter } from 'next/navigation';
import React from 'react';

type Props = {};

const LanguageSelect = (props: Props) => {
    const router = useRouter();
    const pathname = usePathname();

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

    const options = [
        {
            label: (
                <Stack direction={'row'} alignItems={'center'}>
                    <Icon
                        sx={{
                            display: 'flex',
                            alignItems: 'center',
                            justiftContent: 'center',
                            borderRadius: '50%',
                            img: {
                                objectPosition: 'center',
                                objectFit: 'contain',
                                width: '20px',
                                height: '20px',
                            },
                        }}
                    >
                        <img src={getLanguageImage('uz')} alt='' />
                    </Icon>
                    <span>UZ</span>
                </Stack>
            ),
            value: 'uz',
        },
        {
            label: (
                <Stack direction={'row'} alignItems={'center'}>
                    <Icon
                        sx={{
                            display: 'flex',
                            alignItems: 'center',
                            justiftContent: 'center',
                            borderRadius: '50%',
                            img: {
                                objectPosition: 'center',
                                objectFit: 'contain',
                                width: '20px',
                                height: '20px',
                            },
                        }}
                    >
                        <img src={getLanguageImage('ru')} alt='' />
                    </Icon>
                    <span>RU</span>
                </Stack>
            ),
            value: 'ru',
        },
        {
            label: (
                <Stack direction={'row'} alignItems={'center'}>
                    <Icon
                        sx={{
                            display: 'flex',
                            alignItems: 'center',
                            justiftContent: 'center',
                            borderRadius: '50%',
                            img: {
                                objectPosition: 'center',
                                objectFit: 'contain',
                                width: '20px',
                                height: '20px',
                            },
                        }}
                    >
                        <img src={getLanguageImage('en')} alt='' />
                    </Icon>
                    <span>EN</span>
                </Stack>
            ),
            value: 'en',
        },
        {
            label: (
                <Stack direction={'row'} alignItems={'center'}>
                    <Icon
                        sx={{
                            display: 'flex',
                            alignItems: 'center',
                            justiftContent: 'center',
                            borderRadius: '50%',
                            img: {
                                objectPosition: 'center',
                                objectFit: 'contain',
                                width: '20px',
                                height: '20px',
                            },
                        }}
                    >
                        <img src={getLanguageImage('cn')} alt='' />
                    </Icon>
                    <span>中國人</span>
                </Stack>
            ),
            value: 'cn',
        },
    ];

    return (
        <ReactSelect
            options={options}
            defaultValue={options[0]}
            styles={{
                control(base, props) {
                    return {
                        ...base,
                        border: props.isFocused ? '2px solid #3489E4' : '2px solid #D8D8D8',
                        borderRadius: '8px',
                        boxShadow: '0',
                    };
                },
                valueContainer(base, props) {
                    return {
                        ...base,
                        // border: '1px solid #D8D8D8',
                    };
                },
                indicatorSeparator(base, props) {
                    return {
                        display: 'none',
                    };
                },
            }}
        />
    );
};

export default LanguageSelect;

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