"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Box, Center, Flex, Grid, Group, Skeleton, Text, TextInput } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import { IDataCalender, IHistoryCalender } from '../lib/type_calender';
import { funGetAllCalender, funGetHostory } from '../lib/api_calender';
import { useShallowEffect } from '@mantine/hooks';
import moment from 'moment';
import "moment/locale/id";
import _ from 'lodash';

export default function HistoryDivisionCalender() {
  const [isData, setData] = useState<IHistoryCalender[]>([])
  const router = useRouter()
  const param = useParams<{ id: string, detail: string }>()
  const [searchQuery, setSearchQuery] = useState('')
  const [loading, setLoading] = useState(true)


  const getData = async () => {
    try {
      setLoading(true)
      const response = await funGetHostory('?division=' + param.id + '&search=' + searchQuery)
      setData(response.data)
      setLoading(false)
    } catch (error) {
      console.error(error)
    } finally {
      setLoading(false)
    }
  }

  useShallowEffect(() => {
    getData()
  }, [searchQuery])
  return (
    <Box>
      <LayoutNavbarNew back={`/division/${param.id}/calender/`} title="Riwayat kalender" menu />
      <Box p={20}>
        <TextInput
          styles={{
            input: {
              color: WARNA.biruTua,
              borderRadius: WARNA.biruTua,
              borderColor: WARNA.biruTua,
            },
          }}
          size="md"
          radius={30}
          leftSection={<HiMagnifyingGlass size={20} />}
          placeholder="Pencarian"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
        />
        <Box mt={30}>
          <Box bg={"#DBE9D8"} style={{
            borderRadius: 10,
            padding: 20
          }}>
            {loading ?
              Array(6)
                .fill(null)
                .map((_, i) => (
                  <Box key={i} mb={10}>
                    <Grid >
                      <Grid.Col span={2}>
                        <Flex justify={"center"} direction={'column'}>
                          <Skeleton height={30} width={"100%"} radius={"md"} />
                          <Skeleton height={20} width={"100%"} radius={"md"} mt={10} />
                        </Flex>
                      </Grid.Col>
                      <Grid.Col span={'auto'}>
                        {[...Array(1)].map((_, x) => (
                          <Box mb={10} key={x}>
                            <Skeleton height={20} width={"100%"} radius={"md"} />
                            <Skeleton height={20} width={"100%"} radius={"md"} mt={10} />
                          </Box>
                        ))}
                      </Grid.Col>
                    </Grid>
                  </Box>
                ))
              :
              _.isEmpty(isData)
              ?
              <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
                 <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada history</Text>
              </Box>
              :
              isData.map((v, i) => {
                return (
                  <Grid key={i} align='center'>
                    <Grid.Col span={3}>
                      <Flex justify={"center"} direction={'column'}>
                        <Text ta={"center"} fz={20} fw={'bold'}>{moment(v.dateStart).format('D MMM')}</Text>
                        <Text ta={"center"} fz={15}>{moment(v.dateStart).format('dddd')}</Text>
                      </Flex>
                    </Grid.Col>
                    <Grid.Col span={9}>
                      {v.data.map((d, x) => {
                        return (
                          <Box mb={9} key={x}
                          onClick={() => router.push(`/division/${param.id}/calender/${d.id}`)}
                          >
                            <Text fw={"bold"} lineClamp={1}>{d.title}</Text>
                            <Text>{d.timeStart} | {d.timeEnd}</Text>
                          </Box>
                        )
                      })}
                    </Grid.Col>
                  </Grid>
                )
              })
            }
          </Box>
        </Box>
      </Box>
    </Box>
  );
}