import { useState } from 'react'
import { UnstyledButton, Menu, Image, Group, Tooltip } from '@mantine/core'
import { IconChevronDown } from '@tabler/icons-react'
import english from './images/english.png'
import vietnam from './images/vietnam.png'
import * as classes from './LanguagePicker.module.css.ts'

const data = [
  { label: 'EN', image: english },
  { label: 'VI', image: vietnam },
]
const LanguagePicker = () => {
  const [opened, setOpened] = useState(false)
  const [selected, setSelected] = useState(data[0])
  const items = data.map((item) => (
    <Menu.Item
      leftSection={<Image src={item.image} width={18} height={18} />}
      onClick={() => setSelected(item)}
      key={item.label}
    >
      {item.label}
    </Menu.Item>
  ))

  return (
    <Menu
      onOpen={() => setOpened(true)}
      onClose={() => setOpened(false)}
      radius="xs"
      width="target"
      withinPortal
    >
      <Menu.Target>
        <Tooltip label="Language">
          <UnstyledButton
            className={classes.control}
            data-expanded={opened || undefined}
            w={100}
          >
            <Group gap="xs">
              <Image src={selected.image} width={15} height={15} />
              <span className={classes.label}>{selected.label}</span>
            </Group>
            <IconChevronDown
              size="1rem"
              className={classes.icon.default}
              stroke={1.5}
            />
          </UnstyledButton>
        </Tooltip>
      </Menu.Target>
      <Menu.Dropdown>{items}</Menu.Dropdown>
    </Menu>
  )
}

export default LanguagePicker
