import Button from '@/components/Button';
import Metahead from '@/components/Metahead';
import { MyContext } from '@/components/MyContext';
import Reacentuser from '@/components/Reacentuser';
import Select from '@/components/Select';
import TableData from '@/components/TableData';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { useContext, useEffect, useState } from 'react';
import { month, year } from '../../data';
//data-te-select-init

type Item = {
  presenterid: number;
  userid: number;
  email: string;
  firstname: string;
  initials: string;
  phone: number;
  surname: string;
  presenterpassword: string;
  profileImage: string;
  registerid: number;
};

type FormValues = {
  month: string;
  year: string;
};
type MonthYearBoolean = {
  monthBoolean: boolean;
  yearBoolean: boolean;
};

const Presenter_rota: React.FC = () => {
  // accessing a context api
  const { formValues, setFormValues } = useContext(MyContext);
  const [data, setData] = useState<Item[]>([]);
  console.log('data profile');
  console.log(data);
  console.log('data profile');
  const router = useRouter();
  const { data: session, status } = useSession();
  if (status === 'unauthenticated') {
    router.push('/');
  }

  // useEffect(() => {
  //   if (status === 'unauthenticated') {
  //     // redirect back to Dashboard
  //     router.push("/presenter_rota");
  //   }
  // }, [router, session, status]);
  const [checkMonthY, setCheckMonthYear] = useState<MonthYearBoolean>({
    monthBoolean: false,
    yearBoolean: false,
  });
  // const [formValues, setFormValues] = useState<FormValues>({
  //   month: '',
  //   year: '2023',
  // });

  // a function which store change value
  const handleDropdownChange = (
    event: React.ChangeEvent<HTMLSelectElement>
  ) => {
    const { name, value } = event.target;
    setFormValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  };
  // const handleDropdownChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
  //   const selectedOption = event.target.options[event.target.selectedIndex];
  //   const keyValue = selectedOption.getAttribute('key');
  //   setFormValues((prevValues) => ({
  //         ...prevValues,
  //         month: JSON.stringify(keyValue),
  //       }));
  //   console.log('Key Value:', selectedOption);
  //   console.log('Key Value:', typeof selectedOption );
  // };

  console.log('Form Value:');
  console.log(formValues);
  // A function returing async function
  async function fetchPresenter() {
    const response = await fetch('api/getactiveuser');
    const result = await response.json();
    console.log('Data presenter rota:');
    console.log(result);
    console.log('Data presenter rota:');

    setData(result);
    console.log('dataaaa:');
    console.log(data);
  }
  useEffect(() => {
    fetchPresenter();
  }, []);

  return (
    <>
      <Metahead pageTitle="Presenter Rota - Shift-Management" />
      <div className="container mx-auto my-[33px]">
        <div className="flex justify-between px-3 py-3">
          <div>
            {/* <label htmlFor="monthDropdown">Select a Year:</label> */}
            <select
              id="year"
              name="year"
              className="mx-1 border-black border-[1px] rounded-[5px] w-[80px] bg-transparent h-[45px] p-2"
            >
              {year.map((yeardata) => (
                <Select key={yeardata.id} selectdata={yeardata} />
              ))}
            </select>
            {/* <label htmlFor="monthDropdown">Select a month:</label> */}
            <select
              className="mx-1 border-black border-[1px] rounded-[5px] w-[95px] bg-transparent h-[45px] p-2"
              id="month"
              name="month"
              value={formValues.month}
              onChange={handleDropdownChange}
            >
              {month.map((monthdata) => (
                <Select key={monthdata.id} selectdata={monthdata} />
              ))}
            </select>
          </div>
          <div className="">
            <Button
              linktext="Add presenter"
              linkclassname="text-white bg-purple rounded-[5px] text-[20px]"
              onclick="setShowModal(true)"
              modaltitle="Add presenter"
            />
          </div>
        </div>

        <TableData handleClick={fetchPresenter} />
        {/* <div className="flex justify-end px-3 py-3 mt-[30px]">
          <div className="grid grid-cols-2 gap-5">
            <Button
              linktext="Save changes"
              linkclassname="text-white bg-purple rounded-[5px]"
              divclassname="justify-between"
              link="/"
            />
            <Button
              linktext="Print sheet"
              linkclassname="text-black border-[1px] border-solid border-black bg-white rounded-[5px]"
              divclassname="justify-between"
              link="/" 
              // onclick={}
            />
          </div>
        </div> */}
        <h1 className="mx-3 font-semibold text-[35px] mt-[20px]">Presenter</h1>

        {/* <div> */}
        <Reacentuser updatedPresenter={data} />
        {/* <Userdata /> */}

        {/* </div> */}
      </div>
    </>
  );
};

export default Presenter_rota;