import React from 'react'
import { Menu } from '@headlessui/react'
import { MdOutlineCheckBox, MdOutlineCheckBoxOutlineBlank, MdOutlineLightMode, MdDarkMode } from 'react-icons/md'
import { TbColorPicker, TbLanguage } from 'react-icons/tb'

const UserOptionsMenu = ({ setPreferences, theme, i18n }) => {
  return (
    <>
      <div className="flex items-center justify-center text-gray-900 dark:text-white">
        <TbColorPicker className="mr-2 size-5" aria-hidden="true" />
        {i18n.t('common.theme') || 'Tema'}
      </div>
      <div className="mb-2 grid grid-cols-2 gap-2 p-1">
        <Menu.Item>
          <button
            className={`${
              theme === 'light'
                ? 'bg-theme-app-500 text-white dark:bg-theme-app-500'
                : 'bg-theme-app-50 text-gray-900 transition-colors duration-350 ease-in-out hover:bg-theme-app-100'
            } group flex w-full items-center rounded-md p-2 text-sm`}
            onClick={async () => {
              setPreferences('light')
            }}
          >
            <MdOutlineLightMode className="mr-2 size-5" aria-hidden="true" />
            {i18n.t('common.themeLight') || 'Claro'}
          </button>
        </Menu.Item>
        <Menu.Item>
          <button
            className={`${
              theme === 'dark'
                ? 'bg-theme-app-500 text-white dark:bg-theme-app-500'
                : 'bg-theme-app-50 text-gray-900 transition-colors duration-350 ease-in-out hover:bg-theme-app-100'
            } group flex w-full items-center rounded-md p-2 text-sm`}
            onClick={() => {
              setPreferences('dark')
            }}
          >
            <MdDarkMode className="mr-2 size-5" aria-hidden="true" />
            {i18n.t('common.themeDark') || 'Oscuro'}
          </button>
        </Menu.Item>
      </div>

      <div className="flex items-center justify-center text-gray-900 dark:text-white">
        <TbLanguage className="mr-2 size-5" aria-hidden="true" />
        {i18n.t('common.language') || 'Idioma'}
      </div>

      <div className="mb-2 grid grid-cols-2 gap-2 p-1">
        <Menu.Item>
          <button
            className={`${
              i18n.activeLocale === 'es'
                ? 'bg-theme-app-500 text-white dark:bg-theme-app-500'
                : 'bg-theme-app-50 text-gray-900 transition-colors duration-350 ease-in-out hover:bg-theme-app-100'
            } group flex w-full items-center rounded-md p-2 text-sm`}
            onClick={async () => {
              setPreferences('es')
            }}
          >
            {
              i18n.activeLocale === 'es'
                ? (
                  <MdOutlineCheckBox
                    className="mr-2 size-5"
                    aria-hidden="true"
                  />
                )
                : (
                  <MdOutlineCheckBoxOutlineBlank
                    className="mr-2 size-5"
                    aria-hidden="true"
                  />
                )
            }
            {i18n.t('common.languageSpanish') || 'Español'}
          </button>
        </Menu.Item>
        <Menu.Item>
          <button
            className={`${
              i18n.activeLocale === 'en'
                ? 'bg-theme-app-500 text-white dark:bg-theme-app-500'
                : 'bg-theme-app-50 text-gray-900 transition-colors duration-350 ease-in-out hover:bg-theme-app-100'
            } group flex w-full items-center rounded-md p-2 text-sm`}
            onClick={() => {
              setPreferences('en')
            }}
          >
            {
              i18n.activeLocale === 'en'
                ? (
                  <MdOutlineCheckBox
                    className="mr-2 size-5"
                    aria-hidden="true"
                  />
                )
                : (
                  <MdOutlineCheckBoxOutlineBlank
                    className='mr-2 size-5'
                    aria-hidden='true'
                  />
                )
            }
            {i18n.t('common.languageEnglish') || 'Inglés'}
          </button>
        </Menu.Item>
      </div>
    </>
  )
}

export default UserOptionsMenu