'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Divider, Grid, GridCol, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconEdit } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import stateProfilePPID from '../../_state/ppid/profile_ppid/profile_PPID';


function Page() {
  const router = useRouter()
  const allList = useProxy(stateProfilePPID)
  useShallowEffect(() => {
    allList.profile.load("edit") // Assuming "1" is your default ID, adjust as needed
  }, [])

  if (!allList.profile.data) {
    return <Stack>
      <Skeleton radius={10} h={800} />
    </Stack>
  }

  const dataArray = Array.isArray(allList.profile.data)
    ? allList.profile.data
    : [allList.profile.data];

  return (
    <Paper bg={colors['white-1']} p={'md'}>
      <Stack gap={"xs"}>
        <Grid>
          <GridCol span={{ base: 12, md: 11 }}>
            <Title order={3}>Preview Profile PPID</Title>
          </GridCol>
          <GridCol span={{ base: 12, md: 1 }}>
            <Button bg={colors['blue-button']} onClick={() => router.push(`/admin/ppid/profile-ppid/${allList.profile.data?.id}`)}>
              <IconEdit size={16} />
            </Button>
          </GridCol>
        </Grid>
        {dataArray.map((item) => (
          <Box key={item.id} >
            <Paper p={"xl"} bg={colors['BG-trans']}>
              <Box px={{ base: "md", md: 100 }}>
                <Grid>
                  <GridCol span={{ base: 12, md: 12 }}>
                    <Center>
                      <Image src={"/darmasaba-icon.png"} w={{ base: 100, md: 150 }} alt='' />
                    </Center>
                  </GridCol>
                  <GridCol span={{ base: 12, md: 12 }}>
                    <Text ta={"center"} fz={{ base: "1.2rem", md: "1.8rem" }} fw={'bold'}>PROFIL PIMPINAN BADAN PUBLIK DESA DARMASABA </Text>
                  </GridCol>
                </Grid>
              </Box>
              <Divider my={"md"} color={colors['blue-button']} />
              {/* biodata perbekel */}
              <Box px={{ base: 0, md: 50 }} pb={30}>
                <Box pb={20} px={{ base: 0, md: 50 }}>
                  <Paper bg={colors['BG-trans']} w={{ base: "100%", md: "100%" }}>
                    <Stack gap={0}>
                      <Center>
                        <Image
                          pt={{ base: 0, md: 90 }}
                          src={item.image?.link || "/perbekel.png"}
                          w={{ base: 250, md: 350 }}
                          alt='Foto Profil PPID'
                          onError={(e) => {
                            e.currentTarget.src = "/perbekel.png";
                          }}
                        />
                      </Center>
                      <Paper
                        bg={colors['blue-button']}
                        py={20}
                        className="glass3"
                        px={{ base: 10, md: 10 }}

                      >
                        <Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "1.2rem", md: "1.6rem" }}>
                          {item.name}
                        </Text>
                      </Paper>
                    </Stack>
                  </Paper>
                </Box>
                <Box pt={10}>
                  <Box>
                    <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Biodata</Text>
                    <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.biodata }} />
                  </Box>
                  <Box>
                    <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Riwayat Karir</Text>
                    <Text fz={{ base: "1rem", md: "1.5rem" }} dangerouslySetInnerHTML={{ __html: item.riwayat }} />
                  </Box>
                </Box>
                <Box pb={30}>
                  <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Pengalaman Organisasi</Text>
                  <Box px={20}>
                    <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.pengalaman }} />
                  </Box>
                </Box>
                <Box pb={20}>
                  <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Program Kerja Unggulan</Text>
                  <Box px={20}>
                    <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.unggulan }} />
                  </Box>
                </Box>
              </Box>
            </Paper>
          </Box>
        ))}
      </Stack>
    </Paper>
  )
}



export default Page;