import { useEffect } from "react";
// import dayjs from "dayjs";
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useUpdateAvatarByAdminMutation } from '../../../app/services/user';
import { useAppSelector } from '../../../app/store';
import AvatarUploader from '../../../common/component/AvatarUploader';
import Button from '../../../common/component/styled/Button';
import IconDelete from '../../../assets/icons/delete.svg';
import CreateModal from './CreateModal';
import WebhookEdit from './WebhookEdit';
import WebhookModal from './WebhookModal';
import DeleteModal from './DeleteModal';
import BotAPIKeys from './BotAPIKeys';
import { toast } from 'react-hot-toast';

type TipProps = { title: string, desc: string };
const Tip = ({ title, desc }: TipProps) => {

  return <div className="flex flex-col text-sm">
    <h2 className="">{title}</h2>
    <p className="text-gray-500">{desc}</p>
  </div>;
};
const tdClass = "px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 align-top";
type WebhookParams = { webhook?: string, uid: number };
type DeleteParams = { name: string, uid: number };
export default function BotConfig() {
  const [updateAvatar, { isSuccess: updateAvatarSuccess }] = useUpdateAvatarByAdminMutation();
  const [createModalVisible, setCreateModalVisible] = useState(false);
  const [currWebhookParams, setCurrWebhookParams] = useState<WebhookParams | undefined>(undefined);
  const [currDeleteParams, setCurrDeleteParams] = useState<DeleteParams | undefined>(undefined);
  const bots = useAppSelector(store => Object.values(store.users.byId).filter(u => !!u.is_bot));
  const { t } = useTranslation("setting", { keyPrefix: "bot" });

  const toggleCreateModalVisible = () => {
    setCreateModalVisible(prev => !prev);
  };
  const toggleWebhookModalVisible = (obj?: WebhookParams) => {
    console.log("webhook modal", obj);

    setCurrWebhookParams(obj);
  };
  const toggleDeleteModalVisible = (obj?: DeleteParams) => {
    setCurrDeleteParams(obj);
  };
  useEffect(() => {
    if (updateAvatarSuccess) {
      toast.success("Update Bot Avatar Successfully!");
    }
  }, [updateAvatarSuccess]);

  return (
    <>
      <div className="flex flex-col justify-start items-start gap-4">
        <div className="flex flex-col gap-4 max-w-[634px] mb-4">
          <Tip title={t("bot_tip_title")} desc={t("bot_tip_desc")} />
          <Tip title={t("webhook_tip_title")} desc={t("webhook_tip_desc")} />
        </div>
        <div className="flex flex-col gap-1">
          <h2 className='font-semibold'>{t("manage")}</h2>
          <p className='text-gray-500 text-xs'>{t("manage_desc")}</p>
        </div>

        <div className="w-fit  overflow-hidden">
          <table className="min-w-full table-auto">
            <thead className="border-b bg-gray-50">
              <tr>
                {[t("col_avatar"), t('col_name'), t('col_api_key'), t('col_webhook'), t('col_opt')].map(title => <th key={title} scope="col" className="text-sm font-bold text-gray-900 px-6 py-4 text-left">
                  {title}
                </th>)}
              </tr>
            </thead>
            <tbody>
              {bots.map(bot => {
                const { uid, name, avatar } = bot;
                return <tr key={uid} className="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                  <td className="px-4 py-2 flex flex-col gap-1 items-start">
                    <AvatarUploader uid={uid} url={avatar} uploadImage={updateAvatar} name={name} className="!w-14 !h-14" />
                    <span className='text-xs text-gray-500'>
                      #{uid}
                    </span>
                  </td>
                  <td className={tdClass}>
                    {name}
                  </td>
                  <td className={tdClass}>
                    <BotAPIKeys uid={uid} />
                  </td>
                  <td className={tdClass}>
                    <WebhookEdit uid={uid} />
                  </td>
                  <td className={tdClass}>
                    <button type='button' onClick={toggleDeleteModalVisible.bind(null, { uid, name })} >
                      <IconDelete className="hover:opacity-80" />
                    </button>
                    {/* <Button className='mini' onClick={toggleWebhookModalVisible.bind(null, { webhook: webhook_url, uid })} >Set Webhook</Button> */}
                  </td>
                </tr>;
              })}
            </tbody>
          </table>
        </div>
        <Button onClick={toggleCreateModalVisible} className="ghost small">Add</Button>

      </div>
      {createModalVisible && <CreateModal closeModal={toggleCreateModalVisible} />}
      {currWebhookParams && <WebhookModal closeModal={toggleWebhookModalVisible} {...currWebhookParams} />}
      {currDeleteParams && <DeleteModal closeModal={toggleDeleteModalVisible} {...currDeleteParams} />}
    </>
  );
}