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 h-5 w-5" aria-hidden="true" />
        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-[350ms] 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 h-5 w-5" aria-hidden="true" />
              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-[350ms] 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 h-5 w-5" aria-hidden="true" />
              Oscuro
          </button>
        </Menu.Item>
      </div>

      <div className="flex items-center justify-center text-gray-900 dark:text-white">
        <TbLanguage className="mr-2 h-5 w-5" aria-hidden="true" />
        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-[350ms] 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 h-5 w-5"
                    aria-hidden="true"
                  />
                )
                : (
                  <MdOutlineCheckBoxOutlineBlank
                    className="mr-2 h-5 w-5"
                    aria-hidden="true"
                  />
                )
            }
              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-[350ms] 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 h-5 w-5"
                    aria-hidden="true"
                  />
                )
                : (
                  <MdOutlineCheckBoxOutlineBlank
                    className='mr-2 h-5 w-5'
                    aria-hidden='true'
                  />
                )
            }
              Ingles
          </button>
        </Menu.Item>
      </div>
    </>
  )
}

export default UserOptionsMenu