import { LayoutNavbarNew, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Avatar, Box, Button, Divider, Flex, Grid, rem, Stack, Table, Text } from '@mantine/core';
import moment from 'moment';
import { HiChevronLeft } from 'react-icons/hi2';
import "moment/locale/id";
import { FaCheck } from 'react-icons/fa6';
import { useMediaQuery } from '@mantine/hooks';
import { MdOutlineEventNote } from 'react-icons/md';

export default function ViewDataConflict({ onClose, data }: { onClose: (val: any) => void, data: any[] }) {
   const tema = useHookstate(TEMA)
   const isMobile2 = useMediaQuery("(max-width: 438px)");

   return (
      <Box>
         <LayoutNavbarNew
            // back=""
            title="Data Acara"
            state={
               <Box>
                  <ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
                     <HiChevronLeft size={20} color='white' />
                  </ActionIcon>
               </Box>
            }
            menu={<></>}
         />
         <Box p={20}>
            {
               (data.length === 0) ?
                  <Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
                     <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada data</Text>
                  </Stack>
                  :
                  <Box mt={20} mb={100}>
                     {data.map((v, i) => {
                        return (
                           <Box my={10} key={i}>
                              <Grid align='center' >
                                 <Grid.Col
                                    span={{
                                       base: 1,
                                       xs: 1,
                                       sm: 1,
                                       md: 1,
                                       lg: 1,
                                       xl: 1,
                                    }}
                                 >
                                    <ActionIcon variant="light" bg={tema.get().utama} size={50} radius={100} aria-label="icon" >
                                       <MdOutlineEventNote color={"white"} size={25} />
                                    </ActionIcon>
                                 </Grid.Col>
                                 <Grid.Col
                                    span={{
                                       base: 11,
                                       xs: 11,
                                       sm: 11,
                                       md: 11,
                                       lg: 11,
                                       xl: 11,
                                    }}
                                 >
                                    <Flex justify='space-between' align={"center"}>
                                       <Flex direction={'column'} align="flex-start" justify="flex-start">
                                          <Text pl={isMobile2 ? 40 : 30} lineClamp={1}>{v.title}</Text>
                                          <Text pl={isMobile2 ? 40 : 30} c={"dimmed"} lineClamp={1}>{moment.utc(v.timeStart).format("HH:mm")} - {moment.utc(v.timeEnd).format("HH:mm")}</Text>
                                       </Flex>
                                       {/* {isSelected ? <FaCheck /> : null} */}
                                    </Flex>
                                 </Grid.Col>
                              </Grid>
                              <Box mt={10}>
                                 <Divider size={"xs"} />
                              </Box>
                           </Box>
                        );
                     })}
                  </Box>
            }
         </Box>
         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
            maxWidth: rem(550),
            zIndex: 999,
            backgroundColor: `${tema.get().bgUtama}`,
         }}>
            <Button
               c={"white"}
               bg={tema.get().utama}
               size="lg"
               radius={30}
               fullWidth
               onClick={() => { onClose(true) }}
            >
               Tutup
            </Button>
         </Box>
      </Box>
   );
}
