"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { close, loading } from "@/config/swal";
import { getWeeklyPlanList } from "@/service/agenda-setting/agenda-setting";
import { getPlanningById } from "@/service/planning/planning";
import { useParams } from "next/navigation";
import dayjs from "dayjs";
import { useEffect, useRef, useState } from "react";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import JoditEditor from "jodit-react";

export default function DetailTaskPlanMediahub() {
  const params = useParams();
  const id = params?.id;
  const editor = useRef(null);

  const [planningData, setPlanningData] = useState<any>();

  const [type, setType] = useState("");

  const [weeklyList, setWeeklyList] = useState<any>([]);
  const [weeklySelected, setWeeklySelected] = useState();

  const [taskOutput, setTaskOutput] = useState<any>([]);
  const [destination, setDestination] = useState<any>([]);
  const [listDest, setListDest] = useState([]);
  const [topDestination, setTopDestination] = useState<any>([]);

  useEffect(() => {
    initFetch();
  }, [id]);

  async function initFetch() {
    if (id != undefined) {
      loading();
      const res = await getPlanningById(id);
      close();

      if (res?.data?.data != undefined) {
        const data = res?.data?.data;
        console.log("Data :", data);
        setPlanningData(data);
        setAssignedTopLevel(data?.assignedToTopLevel);
        setArrayDestination(data?.assignedToLevel);
        setArrayTaskOutput(data?.fileTypeOutput);
        setType(String(data?.assignmentTypeId));
      }
    }
  }

  function setArrayDestination(assignedToLevel: any) {
    if (assignedToLevel?.length > 0) {
      const arrayDestination = [];
      const arrayDest = assignedToLevel.split(",");

      for (const element of arrayDest) {
        arrayDestination.push(element);
      }

      setDestination(arrayDestination);
    }
  }

  function setAssignedTopLevel(assignedToTopLevel: any) {
    if (assignedToTopLevel?.length > 0) {
      const arrayTopLevel = [];
      const arrayTop = assignedToTopLevel.split(",");

      for (const element of arrayTop) {
        arrayTopLevel.push(Number(element));
      }

      setTopDestination(arrayTopLevel);
    }
  }

  function setArrayTaskOutput(output: any) {
    if (output?.length > 0) {
      const arrayOutput = [];
      const arrOutput = output.split(",");

      for (const element of arrOutput) {
        arrayOutput.push(Number(element));
      }

      setTaskOutput(arrayOutput);
    }
  }

  useEffect(() => {
    getWeeklyPlanning();
  }, [planningData]);

  async function getWeeklyPlanning() {
    const TODAY = dayjs().format("YYYY-MM-DD");
    const res = await getWeeklyPlanList(planningData?.date || TODAY, 1);

    if (res?.data !== null) {
      const rawUser = res?.data?.data;
      const optionArr = rawUser.map((option: any) => ({
        id: option.id,
        label: option.title,
        value: option.id,
      }));
      console.log("res", optionArr);

      setWeeklyList(optionArr);
    }
  }
  return (
    <>
      <SiteBreadcrumb />
      <div className="text-black flex flex-col gap-4">
        <p className="text-lg">Perencanaan Mediahub</p>
        <p className="text-sm">Judul Perencanaan</p>
        <Input value={planningData?.title} readOnly />
        <p className="text-sm">Output Tugas</p>
        <div className="flex flex-row gap-3">
          <div className="flex items-center space-x-2">
            <Checkbox
              id="all"
              checked={taskOutput ? taskOutput.length == 4 : false}
            />
            <label
              htmlFor="all"
              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              Semua
            </label>
          </div>
          <div className="flex items-center space-x-2">
            <Checkbox
              id="all"
              checked={taskOutput ? taskOutput.includes(2) : false}
            />
            <label
              htmlFor="all"
              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              Audio Visual
            </label>
          </div>
          <div className="flex items-center space-x-2">
            <Checkbox
              id="all"
              checked={taskOutput ? taskOutput.includes(4) : false}
            />
            <label
              htmlFor="all"
              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              Audio
            </label>
          </div>
          <div className="flex items-center space-x-2">
            <Checkbox
              id="all"
              checked={taskOutput ? taskOutput.includes(1) : false}
            />
            <label
              htmlFor="all"
              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              Foto
            </label>
          </div>
          <div className="flex items-center space-x-2">
            <Checkbox
              id="all"
              checked={taskOutput ? taskOutput.includes(3) : false}
            />
            <label
              htmlFor="all"
              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              Text
            </label>
          </div>
        </div>
        <p className="text-sm">Pelaksana Tugas</p>
        <div className="flex flex-row gap-3">
          <div className="flex items-center space-x-2">
            <Checkbox
              id="all"
              checked={topDestination ? topDestination.includes(0) : false}
            />
            <label
              htmlFor="all"
              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              Semua Unit
            </label>
          </div>
          <div className="flex items-center space-x-2">
            <Checkbox
              id="all"
              checked={topDestination ? topDestination.includes(1) : false}
            />
            <label
              htmlFor="all"
              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              Mabes Polri
            </label>
          </div>
          <div className="flex items-center space-x-2">
            <Checkbox
              id="all"
              checked={topDestination ? topDestination.includes(2) : false}
            />
            <label
              htmlFor="all"
              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              Polda
            </label>
          </div>
          <div className="flex items-center space-x-2">
            <Checkbox
              id="all"
              checked={topDestination ? topDestination.includes(3) : false}
            />
            <label
              htmlFor="all"
              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              Polres
            </label>
          </div>
        </div>
        <p className="text-sm">Jenis Penugasan</p>
        <RadioGroup className="flex flex-row" disabled>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="1" id="1" checked={type === "1"} />
            <Label htmlFor="1">Publikasi {type}</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="2" id="2" checked={type === "2"} />
            <Label htmlFor="2">Amplifikasi</Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="3" id="3" checked={type === "3"} />
            <Label htmlFor="3">Kontra</Label>
          </div>
        </RadioGroup>
        <p className="text-sm">Tanggal</p>
        <Input value={planningData?.date} className="w-fit" readOnly />
        <p className="text-sm">Penugasan Mingguan</p>
        <Input value={weeklyList[0]?.label} readOnly />
        <JoditEditor
          ref={editor}
          value={planningData?.description}
          className="dark:text-black"
          config={{ readonly: true, toolbar: false }}
        />
      </div>
    </>
  );
}
