'use client'
import { WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box, Grid, Progress, Skeleton, Text } from '@mantine/core';
import { useParams } from 'next/navigation';
import React, { useState } from 'react';
import { HiMiniPresentationChartBar } from 'react-icons/hi2';
import { globalRefreshProject } from '../lib/val_project';
import toast from 'react-hot-toast';
import { funGetOneProjectById } from '../lib/api_project';
import { useShallowEffect } from '@mantine/hooks';

export default function ProgressDetailProject() {
  const [valProgress, setValProgress] = useState(0)
  const [valLastUpdate, setValLastUpdate] = useState('')
  const param = useParams<{ id: string }>()
  const refresh = useHookstate(globalRefreshProject)
  const [loading, setLoading] = useState(true)

  async function getOneData() {
    try {
      setLoading(true)
      const res = await funGetOneProjectById(param.id, 'progress');
      if (res.success) {
        setValProgress(res.data.progress);
        setValLastUpdate(res.data.lastUpdate);
      } else {
        toast.error(res.message);
      }
      setLoading(false)
    } catch (error) {
      console.error(error);
      toast.error("Gagal mendapatkan progress Kegiatan, coba lagi nanti");
    } finally {
      setLoading(false)
    }
  }

  function onRefresh() {
    if (refresh.get()) {
      getOneData()
      refresh.set(false)
    }
  }

  useShallowEffect(() => {
    onRefresh()
  }, [refresh.get()])

  useShallowEffect(() => {
    getOneData();
  }, [param.id])

  return (
    <>
      <Box mt={10}>
        {loading ? 
          <Skeleton width={"100%"} height={100} radius={"md"} />
          :
        <Box
          p={20}
          bg={"#DCEED8"}
          style={{
            borderRadius: 10,
          }}
        >
          <Grid gutter={"lg"}>
            <Grid.Col span={3}>
              <ActionIcon
                variant="gradient"
                size={68}
                aria-label="Gradient action icon"
                radius={100}
                gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
              >
                <HiMiniPresentationChartBar size={35} color={WARNA.biruTua} />
              </ActionIcon>
            </Grid.Col>
            <Grid.Col span={9}>
              <Box>
                <Text>Kemajuan Kegiatan {valProgress}%</Text>
                <Progress
                  style={{
                    border: `1px solid ${"#BDBDBD"}`,
                  }}
                  w={"100%"}
                  color="#FCAA4B"
                  radius="md"
                  size="xl"
                  value={valProgress}
                />
              </Box>
            </Grid.Col>
          </Grid>
        </Box>
        }
      </Box>
    </>
  );
}