import { Dialog, Tab } from '@headlessui/react';
import { FC, useEffect, useRef } from 'react';

import LoginForm from './LoginForm';
import LoginModalTab from './LoginModalTab';
import SignupForm from './SignupForm';

export interface LoginModelProps {
  isOpen: boolean;
  onClose: () => any;
  defaultPage?: number;
}

const LoginModal: FC<LoginModelProps> = ({ defaultPage, isOpen, onClose }) => {
  return (
    <Dialog open={isOpen} onClose={onClose} className="relative z-50">
      <div className="bg-black/80 fixed inset-0 flex items-center justify-center">
        <Dialog.Panel className="bg-zinc-900 text-gray-100 w-[420px] rounded-md py-12 px-6">
          <div className="flex flex-row items-center justify-center">
            <Dialog.Title className="text-xl">
              <img src="./assets/images/logo.png" className="inline w-12 h-12" alt="logo" /> Log in to twitch-clone
            </Dialog.Title>
          </div>
          <Tab.Group defaultIndex={defaultPage}>
            <Tab.List className="space-x-4 border-b border-b-neutral-100/40 mt-4">
              <Tab>
                {({ selected }) => <LoginModalTab selected={selected}>Log In</LoginModalTab>}
              </Tab>
              <Tab>
                {({ selected }) => <LoginModalTab selected={selected}>Sign Up</LoginModalTab>}
              </Tab>
            </Tab.List>
            <Tab.Panels className="mt-4">
              <Tab.Panel>
                <LoginForm />
              </Tab.Panel>
              <Tab.Panel>
                <SignupForm />
              </Tab.Panel>
            </Tab.Panels>
          </Tab.Group>
        </Dialog.Panel>
      </div>
    </Dialog>)
};

export default LoginModal;