Untitled

/* eslint-disable no-extra-boolean-cast */
import { InnovationCard as InnovationCardMyIde } from '@components/Cards/InnovationCard';
import NoData from '@components/NoData';
import color from '@constants/color';
import { MappedCategory } from '@hooks/useGetCategory';
import { MappedEntity } from '@hooks/useGetEntity';
import { useGetInnovations } from '@hooks/useGetInnovation';
import { MappedType } from '@hooks/useGetType';
import { Icon } from '@iconify/react/dist/iconify.js';
import { Loader, Select, Text, TextInput } from '@mantine/core';
import { getInnovationStatusSelectData } from '@utils/innovationStatus';
import { useState } from 'react';

export default function PanelMyIde() {
  const [search, setSearch] = useState('');
  const [entityId, setEntityId] = useState(0);
  const [categoryId, setCategoryId] = useState(1);
  const [typeId, setTypeId] = useState(1);
  const [status, setStatus] = useState(0);
  const [year, setYear] = useState(2024);
  const { data, isFetching } = useGetInnovations({
    typeId,
    categoryId,
    status,
    entityId,
    year: `${year}`,
    namaIde: search,
  });

  const filteredDataList =
    data?.dataList?.filter((item) => item.status === 1) || [];

  const sortedDataList = filteredDataList?.sort(
    (a, b) => a.status - b.status
  );

  console.log(data);

  return (
    <div className="flex flex-col gap-5">
      <section className="flex flex-col gap-4">
        <TextInput
          leftSection={<Icon icon="ic:twotone-search" />}
          placeholder="Cari Ide Inovasi"
          size="md"
          className="w-full"
          onChange={(e) => {
            setSearch(e.target.value);
          }}
        />

        <div className="flex justify-between gap-2">
          <div className="mx-2 mt-2 flex content-center justify-between">
            <Text size="sm" className="text-base-darkGray">
              Menampilkan{' '}
              <span className="text-primary-main font-semibold">
                {filteredDataList?.length}
              </span>{' '}
              Ide Inovasi
            </Text>
          </div>
          <div className="flex gap-x-4">
            <div className="flex gap-2">
              <Select
                placeholder="Entitas"
                data={MappedEntity()}
                clearable
                size="md"
                className="w-2/5"
                onChange={(e) => {
                  setEntityId(Number(e));
                }}
              />
              <Select
                placeholder="Tipe"
                data={MappedType()}
                clearable
                size="md"
                className="w-2/5"
                onChange={(e) => {
                  setTypeId(Number(e));
                }}
              />
              <Select
                placeholder="Kategori"
                data={MappedCategory()}
                clearable
                size="md"
                className="w-2/5"
                onChange={(e) => {
                  setCategoryId(Number(e));
                }}
              />
              <Select
                placeholder="Status"
                data={getInnovationStatusSelectData(['submission'])}
                clearable
                size="md"
                className="w-2/5"
                onChange={(e) => {
                  setStatus(Number(e));
                }}
              />
            </div>
            <div className="flex items-center justify-center">
              <Icon
                icon="fluent:ios-arrow-24-filled"
                width={24}
                height={24}
                color={color.primary.main}
                className="cursor-pointer"
                onClick={() => setYear(year - 1)}
              />
              <span className="text-lg font-bold text-primary-main">
                {year}
              </span>
              <Icon
                icon="fluent:ios-arrow-24-filled"
                className="cursor-pointer"
                width={24}
                height={24}
                rotate={90}
                color={color.primary.main}
                onClick={() => setYear(year + 1)}
              />
            </div>
          </div>
        </div>

        {isFetching && !data?.dataList?.length && (
          <Loader className="mx-auto my-5" />
        )}
        {sortedDataList?.length ? (
          <div className="grid grid-cols-4 gap-4">
            {sortedDataList.map((item) => (
              <InnovationCardMyIde
                key={`comp-submission-${item.innovationId}`}
                name={item?.name}
                year={item?.year}
                entity={item?.entity}
                type={item?.type}
                category={item?.category}
                status={item?.status === 1 ? 'submission' : null}
                href={`/innovation-management-system/deliver/`}
              />
            ))}
          </div>
        ) : (
          <NoData label="Belum ada ide inovasi yang di submit oleh peserta" />
        )}
      </section>
    </div>
  );
}