import { Box, Center, Grid, Group, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useState } from 'react';
import { BsFiletypeCsv, BsFiletypeDocx, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng, BsFiletypePptx, BsFiletypeXlsx } from 'react-icons/bs';
import { IListFileTaskProject } from '../lib/type_project';

export default function ResultsFile({ name, extension }: IListFileTaskProject) {
  const [fixed, setFixed] = useState(extension)

  function cekExtension() {
    let jadi = extension
    if (extension == "msword") {
      jadi = "doc"
    } else if (extension == "vnd.openxmlformats-officedocument.wordprocessingml.document") {
      jadi = "docx"
    } else if (extension == "vnd.ms-excel") {
      jadi = "xls"
    } else if (extension == "vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
      jadi = "xlsx"
    } else if (extension == "vnd.ms-powerpoint") {
      jadi = "ppt"
    } else if (extension == "vnd.openxmlformats-officedocument.presentationml.presentation") {
      jadi = "pptx"
    } else {
      jadi = extension
    }

    setFixed(jadi)
  }


  useShallowEffect(() => {
    cekExtension()
  }, []);

  return (
    <Box style={{
      borderRadius: 10,
      border: `1px solid ${"#D6D8F6"}`,
      padding: 10
    }} mb={10}>
      <Grid gutter={"sm"} justify='flex-start' align='flex-start'>
        <Grid.Col span={"auto"}>
          <Center >
            {fixed == "pdf" && <BsFiletypePdf size={30} />}
            {fixed == "csv" && <BsFiletypeCsv size={30} />}
            {fixed == "png" && <BsFiletypePng size={30} />}
            {fixed == "jpg" || fixed == "jpeg" && <BsFiletypeJpg size={30} />}
            {fixed == "heic" && <BsFiletypeHeic size={30} />}
            {fixed == "doc" || fixed == "docx" && <BsFiletypeDocx size={30} />}
            {fixed == "xls" || fixed == "xlsx" && <BsFiletypeXlsx size={30} />}
            {fixed == "ppt" || fixed == "pptx" && <BsFiletypePptx size={30} />}
          </Center>
        </Grid.Col>
        <Grid.Col span={10}>
          <Text lineClamp={1}
            style={{
              overflowWrap: "break-word"
            }}
          >{name}</Text>
        </Grid.Col>
      </Grid>
      <Group>
      </Group>
    </Box>
  );
}