import React, { useRef, useState } from "react";

import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

import { AuthContext } from "@/context/Auth";
import { GlobalContext } from "@/context/Global";
import { generateUUID, testColumns } from "@/utils/utils";
import { DashboardUI } from "@/components/DashboardUI";
import { Skeleton } from "@/components/Skeleton";
import { ModalSidebar } from "@/components/ModalSidebar";
import { QrCodeGenerator } from "@/components/QrCodeGenerator";
import { LazyLoad } from "@/components/LazyLoad";
import { MkdListTableV2 } from "@/components/MkdListTable";
import InfiniteScrollTest from "@/components/AATest/InfiniteScrollTest/InfiniteScrollTest";
// import Entry from "@/components/AATest/Entry/Entry";

const QuestionTypes = {
  single_choice: "single_choice",
  multiple_choice: "multiple_choice",
  short_answer: "short_answer",
  long_answer: "long_answer",
  multiple_answer: "multiple_answer",
  true_or_false: "true_or_false",
  rating: "rating",
};

const table_columns = [
  {
    uid: "9d9f3c4e-24bc-3464-5196-2897e37a0af1",
    name: "role",
    type: "varchar",
    mapping: {
      admin: "Admin",
      employee: "Employee",
    },
    maps: [],
    is_filter: true,
    rules: [],
    join: {},
  },
  {
    uid: "70ad921a-4a59-9c43-0fdb-47bed5f42be3",
    name: "first_name",
    type: "varchar",
    mapping: {},
    maps: [],
    is_filter: true,
    rules: [],
    join: {},
  },
  {
    uid: "9994c565-1904-c683-18a2-08f09c84135e",
    name: "last_name",
    type: "varchar",
    mapping: {},
    maps: [],
    is_filter: true,
    rules: [],
    join: {},
  },
  {
    uid: "11b30f7e-e926-0b04-f529-4c799337590a",
    name: "email",
    type: "varchar",
    mapping: {},
    maps: [],
    is_filter: true,
    rules: [],
    join: {},
  },
  {
    uid: "fa2f7af9-8259-d410-1a66-905139bb3764",
    name: "status",
    type: "int",
    mapping: {
      0: "inactive",
      1: "active",
    },
    maps: [],
    is_filter: true,
    rules: [],
    join: {},
  },
];
const schema_fields = [
  "role:varchar",
  "first_name:varchar",
  "last_name:varchar",
  "email:varchar",
  "status:int",
];

const jsonQuestions = [
  {
    id: generateUUID(),
    value: "What is the name of your company 1",
    options: [
      {
        id: generateUUID(),
        value: "KPMG",
        is_answer: false,
      },
      {
        id: generateUUID(),
        value: "Twitter X",
        is_answer: false,
      },
      {
        id: generateUUID(),
        value: "ManaknightDigital",
        is_answer: true,
      },
      {
        id: generateUUID(),
        value: "AfriBank",
        is_answer: false,
      },
    ],
    proposed_answer: null,
    correct_answer: null,
    type: QuestionTypes.single_choice,
  },
  {
    id: generateUUID(),
    value: "Mark Owns which of these social medias",
    options: [
      {
        id: generateUUID(),
        value: "Thread",
        is_answer: true,
      },
      {
        id: generateUUID(),
        value: "Twitter",
        is_answer: false,
      },
      {
        id: generateUUID(),
        value: "ManaknightDigital",
        is_answer: false,
      },
      {
        id: generateUUID(),
        value: "Facebook",
        is_answer: true,
      },
    ],
    proposed_answer: null,
    correct_answer: null,
    type: QuestionTypes.multiple_choice,
  },
  {
    id: generateUUID(),
    value: "What Year was React invented",
    options: [
      {
        id: generateUUID(),
        value: "KPMG",
        is_answer: false,
      },
      {
        id: generateUUID(),
        value: "Twitter",
        is_answer: false,
      },
      {
        id: generateUUID(),
        value: "ManaknightDigital",
        is_answer: true,
      },
      {
        id: generateUUID(),
        value: "AfriBank",
        is_answer: false,
      },
    ],
    proposed_answer: null,
    correct_answer: "2013",
    type: QuestionTypes.short_answer,
  },
  {
    id: generateUUID(),
    value: "What is the name of your company",
    options: [
      {
        id: generateUUID(),
        value: "KPMG",
        is_answer: false,
      },
      {
        id: generateUUID(),
        value: "Twitter",
        is_answer: false,
      },
      {
        id: generateUUID(),
        value: "ManaknightDigital",
        is_answer: true,
      },
      {
        id: generateUUID(),
        value: "AfriBank",
        is_answer: false,
      },
    ],
    proposed_answer: null,
    correct_answer: "MKD",
    type: QuestionTypes.long_answer,
  },
  {
    id: generateUUID(),
    value: "What is the name of your company",
    proposed_answer: null,
    correct_answer: null,
    type: QuestionTypes.multiple_answer,
  },
  {
    id: generateUUID(),
    value: "It is fun to be a developer",
    options: [
      {
        id: generateUUID(),
        value: "KPMG",
        is_answer: false,
      },
      {
        id: generateUUID(),
        value: "Twitter",
        is_answer: false,
      },
      {
        id: generateUUID(),
        value: "ManaknightDigital",
        is_answer: true,
      },
      {
        id: generateUUID(),
        value: "AfriBank",
        is_answer: false,
      },
    ],
    proposed_answer: null,
    correct_answer: "true",
    type: QuestionTypes.true_or_false,
  },
  {
    value: "What is the name of your company",
    options: [
      {
        id: generateUUID(),
        value: "KPMG",
        is_answer: false,
      },
      {
        id: generateUUID(),
        value: "Twitter",
        is_answer: false,
      },
      {
        id: generateUUID(),
        value: "ManaknightDigital",
        is_answer: true,
      },
      {
        id: generateUUID(),
        value: "AfriBank",
        is_answer: false,
      },
    ],
    proposed_answer: null,
    correct_answer: null,
    type: QuestionTypes.single_choice,
  },
  {
    id: generateUUID(),
    value: "Rate this quiz",
    proposed_answer: null,
    correct_answer: null,
    type: QuestionTypes.rating,
  },
];
const AdminDashboardPage = () => {
  // const textAreaRef = useRef(null);
  // const inputRef = useRef(null);

  const { dispatch } = React.useContext(AuthContext);
  const { dispatch: globalDispatch } = React.useContext(GlobalContext);

  const [name, setName] = useState("");
  const [currentTab, setCurrentTab] = useState(0);
  const [activeId, setActiveId] = useState(1);
  const [isLoading, setIsLoading] = useState(false);
  const [showSidebar, setShowSidebar] = useState(false);
  const schema = yup
    .object({
      content: yup.string().required(),
    })
    .required();
  const [userRole, setUserRole] = React.useState("admin");

  // const navigate = useNavigate();
  const {
    register,
    handleSubmit,
    setError,
    setValue,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    // inputRef.current.value = "";
    setName(file.name);
    const fileReader = new FileReader();
    fileReader.onload = (() => {
      return (e) => {
        // console.log(e.target.result)
        // textAreaRef.current.value = e.target.result;
      };
    })();

    fileReader.readAsDataURL(file);
  };
  // const onReactZipExport = () => {
  //   generateProject(project, schema, "zip", (error, data) => {
  //     if (error) {
  //       console.log(error);
  //     } else {
  //       console.log(data);
  //     }
  //   });
  // };
  // const onReactCommit = () => {
  //   generateProject(project, schema, "copyList", (error, data) => {
  //     if (error) {
  //       console.log(error);
  //     } else {
  //       console.log(data);
  //     }
  //   });
  // };
  // const onSwiftZipExport = () => {
  //   generateSwiftProject(ios, "zip", (error, data) => {
  //     if (error) {
  //       console.log(error);
  //     } else {
  //       console.log(data);
  //     }
  //   });
  // };
  // const onSwiftCommit = () => {
  //   generateSwiftProject(ios, "copyList", (error, data) => {
  //     if (error) {
  //       console.log(error);
  //     } else {
  //       console.log(data);
  //     }
  //   });
  // };
  // const onAndroidZipExport = () => {
  //   AndroidBuilder(androidConfig, "zip", (error, data) => {
  //     if (error) {
  //       console.log(error);
  //     } else {
  //       console.log(data);
  //     }
  //   });
  // };
  // const onAndroidCommit = () => {
  //   AndroidBuilder(androidConfig, "copyList", (error, data) => {
  //     if (error) {
  //       console.log(error);
  //     } else {
  //       console.log(data);
  //     }
  //   });
  // };
  const onSubmit = (data) => {
    console.log(data);
  };
  React.useEffect(() => {
    globalDispatch({
      type: "SETPATH",
      payload: {
        path: "admin",
      },
    });
  }, []);

  return (
    <>
      {isLoading ? (
        <Skeleton />
      ) : (
        <>
          {/* <div className={`flex w-full max-w-full flex-wrap gap-2`}>
        <InteractiveButton
          className={`focus:shadow-outline h-fit w-fit rounded bg-[#4F46E5] px-4 py-2 text-xs font-bold text-white shadow hover:bg-blue-700 focus:outline-none`}
          onClick={() => onReactZipExport()}
        >
          React Zip Export
        </InteractiveButton>
        <InteractiveButton
          className={`focus:shadow-outline h-fit w-fit rounded bg-[#4F46E5] px-4 py-2 text-xs font-bold text-white shadow hover:bg-blue-700 focus:outline-none`}
          onClick={() => onReactCommit()}
        >
          React Commit
        </InteractiveButton>
        <InteractiveButton
          className={`focus:shadow-outline h-fit w-fit rounded bg-[#4F46E5] px-4 py-2 text-xs font-bold text-white shadow hover:bg-blue-700 focus:outline-none`}
          onClick={() => onSwiftZipExport()}
        >
          Swift Zip Export
        </InteractiveButton>
        <InteractiveButton
          className={`focus:shadow-outline h-fit w-fit rounded bg-[#4F46E5] px-4 py-2 text-xs font-bold text-white shadow hover:bg-blue-700 focus:outline-none`}
          onClick={() => onSwiftCommit()}
        >
          Swift Commit
        </InteractiveButton>
        <InteractiveButton
          className={`focus:shadow-outline h-fit w-fit rounded bg-[#4F46E5] px-4 py-2 text-xs font-bold text-white shadow hover:bg-blue-700 focus:outline-none`}
          onClick={() => onAndroidZipExport()}
        >
          Android Zip Export
        </InteractiveButton>
        <InteractiveButton
          className={`focus:shadow-outline h-fit w-fit rounded bg-[#4F46E5] px-4 py-2 text-xs font-bold text-white shadow hover:bg-blue-700 focus:outline-none`}
          onClick={() => onAndroidCommit()}
        >
          Android Commit
        </InteractiveButton>
      </div> */}

          <div className="flex w-full items-center justify-center text-7xl text-gray-700">
            Dashboard
          </div>

          <LazyLoad>
            <div className="w-full">
              <LazyLoad count={5} counts={[2, 1, 3, 2, 1]}>
                <DashboardUI navigation={[]} user="" aside="" />
              </LazyLoad>

              <LazyLoad count={5} counts={[2, 1, 3, 2, 1]}>
                <MkdListTableV2
                  columns={testColumns}
                  hasFilter={true}
                  tableSchema={[...table_columns]}
                  schemaFields={[...schema_fields]}
                  actions={{
                    select: true,
                    view: true,
                    edit: true,
                    delete: true,
                  }}
                  actionId="id"
                  tableRole="admin"
                  table="user"
                />
              </LazyLoad>
            </div>
          </LazyLoad>
          <button
            className="mx-auto ml-16 border text-3xl"
            onClick={() => setShowSidebar(true)}
          >
            Show sidebar modal
          </button>
          <LazyLoad count={5} counts={[2, 1, 3, 2, 1]}>
            <ModalSidebar
              isModalActive={showSidebar}
              closeModalFn={() => setShowSidebar(false)}
            >
              <InfiniteScrollTest />
              {/* <Entry /> */}
              {/* <QrCodeGenerator /> */}
            </ModalSidebar>
          </LazyLoad>
        </>
      )}
    </>
  );
};

export default AdminDashboardPage;
// https://s3.us-west-1.amazonaws.com/com.mkdlab.images/baas/acenanny/085617155566istockphoto-847039728-170667a.jpg
// https://s3.us-west-1.amazonaws.com/com.mkdlab.images/baas/acenanny/085617155566istockphoto-847039728-170667a.jpg
