"use client";

import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import {
  Box,
  Button,
  Center,
  Group,
  Stack,
  Text,
  TextInput,
  Textarea,
} from "@mantine/core";
import { DatePickerInput } from "@mantine/dates";
import { IconMinus, IconPlus } from "@tabler/icons-react";
import { useAtom } from "jotai";
import _ from "lodash";
import moment from "moment";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { Vote_funCreate } from "../fun/create/create_vote";
import { gs_vote_hotMenu, gs_vote_status } from "../global_state";
import { MODEL_VOTING } from "../model/interface";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
import mqtt_client from "@/util/mqtt_client";

export default function Vote_Create() {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);
  const [hotMenu, setHotMenu] = useAtom(gs_vote_hotMenu);
  const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);

  const [data, setData] = useState({
    title: "",
    deskripsi: "",
    awalVote: "",
    akhirVote: "",
  });

  const [listVote, setListVote] = useState([
    {
      name: "Nama Pilihan",
      value: "",
    },
    {
      name: "Nama Pilihan",
      value: "",
    },
  ]);

  return (
    <>
      <Stack px={"sm"} spacing={"xl"} mb={"xl"}>
        <Stack>
          <TextInput
            styles={{
              label: {
                color: "white",
              },
            }}
            label="Judul"
            withAsterisk
            placeholder="Masukan judul"
            maxLength={100}
            onChange={(val) => {
              setData({
                ...data,
                title: val.target.value,
              });
            }}
          />
          <Stack spacing={5}>
            <Textarea
              styles={{
                label: {
                  color: "white",
                },
              }}
              label="Deskripsi"
              autosize
              minRows={2}
              maxRows={5}
              withAsterisk
              maxLength={300}
              placeholder="Masukan deskripsi"
              onChange={(val) => {
                setData({
                  ...data,
                  deskripsi: val.target.value,
                });
              }}
            />
            <ComponentGlobal_InputCountDown
              maxInput={300}
              lengthInput={data.deskripsi.length}
            />
          </Stack>

          <DatePickerInput
            styles={{
              label: {
                color: "white",
              },
            }}
            label="Jangka Waktu"
            placeholder="Masukan jangka waktu voting"
            withAsterisk
            dropdownType="modal"
            type="range"
            excludeDate={(date) => {
              return moment(date).diff(Date.now(), "days") < 0;
            }}
            onChange={(val: any) => {
              setData({
                ...data,
                awalVote: val[0],
                akhirVote: val[1],
              });
            }}
          />
        </Stack>

        <Stack spacing={0}>
          <Center>
            <Text fw={"bold"} fz={"sm"}>
              Daftar Pilihan
            </Text>
          </Center>

          <Stack spacing={"xl"}>
            <Stack>
              {listVote.map((e, index) => (
                <Box key={index}>
                  <TextInput
                    styles={{
                      label: {
                        color: "white",
                      },
                    }}
                    label={e.name}
                    withAsterisk
                    maxLength={100}
                    placeholder="Nama pilihan voting"
                    onChange={(v) => {
                      const val = _.clone(listVote);
                      val[index].value = v.currentTarget.value;
                      setListVote([...val]);
                    }}
                  />
                </Box>
              ))}
            </Stack>

            <Group position="center">
              <Button
                disabled={listVote.length >= 4 ? true : false}
                radius={"xl"}
                leftIcon={<IconPlus size={15} />}
                onClick={() => {
                  setListVote([
                    ...listVote,
                    { name: "Nama Voting", value: "" },
                  ]);
                }}
                compact
                bg={MainColor.yellow}
                color={"yellow"}
                c={"black"}
              >
                <Text fz={8}>Tambah List</Text>
              </Button>

              <Button
                disabled={listVote.length <= 2 ? true : false}
                radius={"xl"}
                leftIcon={<IconMinus size={15} />}
                onClick={() => {
                  setListVote([...listVote.slice(0, -1)]);
                }}
                compact
                bg={MainColor.yellow}
                color={"yellow"}
                c={"black"}
              >
                <Text fz={8}>Kurangi List</Text>
              </Button>
            </Group>
          </Stack>
        </Stack>

        <Button
          disabled={
            !data.title ||
            !data.deskripsi ||
            !data.awalVote ||
            !data.akhirVote ||
            listVote.map((e, i) => e.value).includes("")
              ? true
              : false
          }
          loaderPosition="center"
          loading={isLoading ? true : false}
          mt={"lg"}
          radius={"xl"}
          onClick={() => {
            onSave(
              router,
              setHotMenu,
              setTabsStatus,
              data as any,
              listVote,
              setIsLoading
            );
          }}
          c={"black"}
          bg={MainColor.yellow}
          color="yellow"
          style={{
            transition: "0.5s",
          }}
        >
          Simpan
        </Button>
      </Stack>
    </>
  );
}

async function onSave(
  router: AppRouterInstance,
  setHotMenu: any,
  setTabsStatus: any,
  data: MODEL_VOTING,
  listVote: any[],
  setIsLoading: any
) {
  if (_.values(data).includes(""))
    return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");

  const cekAwalVote = moment(data.awalVote).format();
  if (cekAwalVote === "Invalid date")
    return ComponentGlobal_NotifikasiPeringatan("Lengkapi Tanggal");

  const cekAkhirVote = moment(data.akhirVote).format();
  if (cekAkhirVote === "Invalid date")
    return ComponentGlobal_NotifikasiPeringatan("Lengkapi Tanggal");

  if (_.values(listVote.map((e) => e.value)).includes(""))
    return ComponentGlobal_NotifikasiPeringatan("Lengkapi Pilihan Voting");

  // console.log("berhasil");

  const res = await Vote_funCreate(data, listVote);
  if (res.status === 201) {
    const dataNotif: any = {
      appId: res.data?.id as any,
      status: res.data?.Voting_Status?.name as any,
      userId: res.data?.authorId as any,
      pesan: res.data?.title as any,
      kategoriApp: "VOTING",
      title: "Voting baru",
    };

    const notif = await notifikasiToAdmin_funCreate({
      data: dataNotif as any,
    });

    if (notif.status === 201) {
      mqtt_client.publish(
        "ADMIN",
        JSON.stringify({
          count: 1,
        })
      );
      
      setHotMenu(2);
      setTabsStatus("Review");
      router.replace(RouterVote.status);
      ComponentGlobal_NotifikasiBerhasil(res.message);
      setIsLoading(true);
    }
  } else {
    ComponentGlobal_NotifikasiGagal(res.message);
  }
}