import themes from 'shared/themes/index.js'
import LocaleIcon from 'shared/components/icons/i18n.js'
import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next'
import Link from 'next/link'
import Picker, {PickerLink} from './picker';
import { Menu } from '@headlessui/react'

const LocalePicker = ({ app, iconOnly=false }) => {
  const { t } = useTranslation(['locales'])
  const router = useRouter()

  const pickerProps = {
    iconOnly,
    Icon: LocaleIcon,
    selectedItem: t(router.locale)
  }

  return (
    <Picker {...pickerProps} >
        {router.locales.map(locale => (
          <PickerLink
            locale={locale}
            href={router.asPath}
            key={locale}>
            {t(locale)}
          </PickerLink>
        ))}
    </Picker>
  )

  // return (
  //   <div className="dropdown dropdown-end w-auto">
  //     <div tabIndex="0" className={ iconOnly
  //       ? 'btn btn-sm'
  //       : `m-0 btn btn-neutral flex flex-row gap-2 btn-outline
  //         md:btn-ghost
  //         hover:bg-neutral hover:border-neutral-content
  //       `
  //     }>
  //       <LocaleIcon />
  //     {!iconOnly && <span>{t(router.locale)}</span>}
  //     </div>
  //     <ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
  //       {router.locales.map(locale => (
  //         <li key={locale}>
  //           <Link href={router.asPath} locale={locale}>
  //             <a className="btn btn-ghost text-base-content hover:bg-base-200">
  //               <span className="text-base-content">
  //                 {t(locale)}
  //               </span>
  //             </a>
  //           </Link>
  //         </li>
  //       ))}
  //     </ul>
  //   </div>
  // )
}

export default LocalePicker