import {
  Box,
  createListCollection,
  Heading,
  HStack,
  Status,
  Tabs,
  Text,
} from "@chakra-ui/react";
import BarChart from "../../components/Charts/BarChart";
import CircularApp from "../../components/Charts/CircularProgress";
import SemiDoughnutChart from "../../components/Charts/SemiDoughnutChart";
import MainFrame from "../../components/MainFrame";
import {
  AccordionItem,
  AccordionItemContent,
  AccordionItemTrigger,
  AccordionRoot,
} from "../../components/ui/accordion";
import { Button } from "../../components/ui/button";
import {
  SelectContent,
  SelectItem,
  SelectRoot,
  SelectTrigger,
  SelectValueText
} from "../../components/ui/select";
import AgencyName from "./AgencyName";

const Dashboard = () => {
  const frameworks = createListCollection({
    items: [
      { label: "Today", value: "Today" },
      { label: "Week", value: "Week" },
      { label: "Month", value: "Month" },
      { label: "Year", value: "Year" },
    ],
  });

  const accItems = [
    {
      value: "1",
      title: "How to create new account?",
      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
    },
    {
      value: "2",
      title: "How to create new account?",
      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
    },
    {
      value: "3",
      title: "How to create new account?",
      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
    },
    {
      value: "4",
      title: "How to create new account?",
      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
    },
  ];

  return (
    <MainFrame>
      <Box  display={"flex"} p={"20px"} pe={'20px'}  gap={5}>
        <Box rounded={'lg'} w={"30%"} boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}>
          <Heading fontSize={"sm"} p={2}>
            Total Users
          </Heading>
          <Tabs.Root
            size={"sm"}
            w={"80%"}
            m={"auto"}
            variant="enclosed"
            fitted
            defaultValue={"tab-1"}
            mb={6}
          >
            <Tabs.List>
              <Tabs.Trigger fontSize={"xs"} value="tab-1">
                Past 24 hrs
              </Tabs.Trigger>
              <Tabs.Trigger fontSize={"xs"} value="tab-2">
                Total Users
              </Tabs.Trigger>
              <Tabs.Trigger fontSize={"xs"} value="tab-3">
                New Signups
              </Tabs.Trigger>
            </Tabs.List>
          </Tabs.Root>
          <Box>
            <SemiDoughnutChart />
          </Box>

          <Box
            w={"80%"}
            m={"auto"}
            display={"flex"}
            justifyContent={"space-between"}
            mt={8}
          >
            <Status.Root colorPalette="blue">
              <Status.Indicator />
              Recruiter <Text fontWeight={500}>2554</Text>
            </Status.Root>
            <Status.Root colorPalette="blue">
              <Status.Indicator />
              Customer <Text fontWeight={500}>1224</Text>
            </Status.Root>
          </Box>
        </Box>
        <Box
          p={"20px"}
          w={"49%"}
          rounded={'lg'}
          boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
        >
          <HStack alignItems={"center"} mb={4}>
            <Text fontSize={"sm"}>Item approvals in</Text>
            <SelectRoot collection={frameworks} size="xs" width="200px">
              <SelectTrigger>
                <SelectValueText p={2} placeholder="Select movie" />
              </SelectTrigger>
              <SelectContent p={2}>
                {frameworks.items.map((movie) => (
                  <SelectItem item={movie} key={movie.value}>
                    {movie.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </SelectRoot>
          </HStack>
          <BarChart />
        </Box>
        <Box
          w={"20%"}
          boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
          p={'10px'}
          rounded={'lg'}
        >
          <Text fontSize={"sm"} fontWeight={500} pt={3}>Number Of Groups created</Text>
          <CircularApp />
        </Box>
      </Box>
      <Box  p={"20px"} pt={0} display={"flex"} gap={5}>
        <Box  w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={'100%'} p={"10px"} overflow={'auto'}>
          <HStack justifyContent={"space-between"} mb={5}>
            <Text fontSize={"xs"} fontWeight={500}>Faqs</Text>
            <Button
              bg={"#fff"}
              color={"#222222CC"}
              px={3}
              fontSize={"12px"}
              h={"28px"}
            >
              View ALL
            </Button>
          </HStack>
          <AccordionRoot collapsible defaultValue={["b"]}>
            {accItems.map((item, index) => (
              <AccordionItem
              boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} 
                key={index}
                value={item.value}
                bg={"#fff"}
                mb={2}
                p={"12px"}
                rounded={5}
                borderBottom={0}
              >
                <AccordionItemTrigger fontSize={"sm"} >
                  {item.title}
                </AccordionItemTrigger>
                <AccordionItemContent fontSize={"xs"} color={'#222222CC'} pt={2}>
                  {item.text}
                </AccordionItemContent>
              </AccordionItem>
            ))}
          </AccordionRoot>
        </Box>
        <Box w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={'100%'} overflow={'auto'}>
          <AgencyName />
        </Box>
      </Box>
    </MainFrame>
  );
};

export default Dashboard;
