"use client";
import { AddIcon, CloudUploadIcon, TimesIcon } from "@/components/icons";
import AdvertiseTable from "@/components/table/advertise/advertise-table";

import {
  Button,
  Card,
  Chip,
  Input,
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalHeader,
  Radio,
  RadioGroup,
  Switch,
  Textarea,
  useDisclosure,
} from "@heroui/react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import * as z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { Controller, useForm } from "react-hook-form";
import { Fragment, useEffect, useState } from "react";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";

import { useDropzone } from "react-dropzone";
import { close, error, loading } from "@/config/swal";
import Image from "next/image";
import {
  createAdvertise,
  createMediaFileAdvertise,
} from "@/services/advertisement";

const createArticleSchema = z.object({
  title: z.string().min(2, {
    message: "Judul harus diisi",
  }),
  url: z.string().min(1, {
    message: "Link harus diisi",
  }),
  description: z.string().min(2, {
    message: "Deskripsi harus diisi",
  }),
});

export default function AdvertisePage() {
  const { isOpen, onOpen, onOpenChange, onClose } = useDisclosure();
  const MySwal = withReactContent(Swal);

  const [refresh, setRefresh] = useState(false);
  const [placement, setPlacement] = useState("banner");

  const [files, setFiles] = useState<File[]>([]);

  const formOptions = {
    resolver: zodResolver(createArticleSchema),
    defaultValues: { title: "", description: "", url: "" },
  };

  const { getRootProps, getInputProps } = useDropzone({
    onDrop: (acceptedFiles) => {
      setFiles(acceptedFiles.map((file) => Object.assign(file)));
    },
    maxFiles: 1,
    accept:
      placement === "banner"
        ? {
            "image/*": [],
            "video/*": [],
          }
        : { "image/*": [] },
  });
  type UserSettingSchema = z.infer<typeof createArticleSchema>;
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<UserSettingSchema>(formOptions);

  const onSubmit = async (values: z.infer<typeof createArticleSchema>) => {
    loading();
    const formData = {
      title: values.title,
      description: values.description,
      placement: placement,
      redirectLink: values.url,
    };
    const res = await createAdvertise(formData);
    if (res?.error) {
      error(res?.message);
      return false;
    }

    const idNow = res?.data?.data?.id;

    if (files.length > 0) {
      const formFiles = new FormData();
      formFiles.append("file", files[0]);
      const resFile = await createMediaFileAdvertise(idNow, formFiles);
    }

    close();
    MySwal.fire({
      title: "Sukses",
      icon: "success",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "OK",
    }).then((result) => {
      if (result.isConfirmed) {
        setRefresh(!refresh);
      }
    });
  };

  const handleRemoveFile = (file: File) => {
    const uploadedFiles = files;
    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
    setFiles([...filtered]);
  };

  return (
    <div className="overflow-x-hidden overflow-y-scroll">
      <div className="px-2 md:px-4 md:py-4 w-full">
        <div className="bg-white shadow-lg dark:bg-[#18181b] rounded-xl p-3">
          <Button
            size="md"
            className="bg-[#F07C00] text-white w-full lg:w-fit"
            onPress={onOpen}
          >
            Buat Baru
            <AddIcon />
          </Button>
          <AdvertiseTable triggerRefresh={refresh} />
        </div>
      </div>
      <Modal isOpen={isOpen} onOpenChange={onOpenChange} size="3xl">
        <ModalContent>
          {() => (
            <>
              <ModalHeader className="flex flex-col gap-1">
                Advertise
              </ModalHeader>
              <ModalBody>
                <form
                  onSubmit={handleSubmit(onSubmit)}
                  className="flex flex-col gap-3"
                >
                  <div className="flex flex-col gap-1">
                    <p className="text-sm">Judul</p>
                    <Controller
                      control={control}
                      name="title"
                      render={({ field: { onChange, value } }) => (
                        <Input
                          type="text"
                          id="title"
                          placeholder=""
                          label=""
                          value={value}
                          onChange={onChange}
                          labelPlacement="outside"
                          className="w-full "
                          classNames={{
                            inputWrapper: [
                              "border-1 rounded-lg",
                              "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
                            ],
                          }}
                          variant="bordered"
                        />
                      )}
                    />
                    {errors?.title && (
                      <p className="text-red-400 text-sm">
                        {errors.title?.message}
                      </p>
                    )}
                  </div>
                  <div className="flex flex-col gap-1">
                    <p className="text-sm">Deskripsi</p>
                    <Controller
                      control={control}
                      name="description"
                      render={({ field: { onChange, value } }) => (
                        <Textarea
                          type="text"
                          id="description"
                          placeholder=""
                          label=""
                          value={value}
                          onChange={onChange}
                          labelPlacement="outside"
                          className="w-full "
                          classNames={{
                            inputWrapper: [
                              "border-1 rounded-lg",
                              "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
                            ],
                          }}
                          variant="bordered"
                        />
                      )}
                    />
                    {errors?.description && (
                      <p className="text-red-400 text-sm">
                        {errors.description?.message}
                      </p>
                    )}
                  </div>
                  <div className="flex flex-col gap-1">
                    <p className="text-sm">Link</p>
                    <Controller
                      control={control}
                      name="url"
                      render={({ field: { onChange, value } }) => (
                        <Input
                          type="text"
                          id="url"
                          placeholder=""
                          label=""
                          value={value}
                          onChange={onChange}
                          labelPlacement="outside"
                          className="w-full "
                          classNames={{
                            inputWrapper: [
                              "border-1 rounded-lg",
                              "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
                            ],
                          }}
                          variant="bordered"
                        />
                      )}
                    />
                    {errors?.url && (
                      <p className="text-red-400 text-sm">
                        {errors.url?.message}
                      </p>
                    )}
                  </div>

                  <p className="text-sm mt-3">Penempatan</p>
                  <RadioGroup
                    label=""
                    orientation="horizontal"
                    size="sm"
                    value={placement}
                    onValueChange={setPlacement}
                  >
                    <Radio value="banner">Banner</Radio>
                    <Radio value="jumbotron">Jumbotron</Radio>
                  </RadioGroup>
                  <div className="flex flex-col gap-1">
                    <p className="text-sm mt-3">Thumbnail</p>
                    {files.length < 1 && (
                      <Fragment>
                        <div {...getRootProps({ className: "dropzone" })}>
                          <input {...getInputProps()} />
                          <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
                            <CloudUploadIcon />
                            <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
                              Tarik file disini atau klik untuk upload.
                            </h4>
                            <div className=" text-xs text-muted-foreground">
                              ( Upload file dengan format .jpg, .jpeg, atau
                              .png. Ukuran maksimal 100mb.)
                            </div>
                          </div>
                        </div>
                      </Fragment>
                    )}

                    {files.length > 0 && (
                      <div className="flex flex-row gap-2">
                        <Image
                          src={URL.createObjectURL(files[0])}
                          className="w-[30%]"
                          alt="thumbnail"
                          width={480}
                          height={480}
                        />
                        <Button
                          className=" border-none rounded-full"
                          variant="bordered"
                          onPress={() => handleRemoveFile(files[0])}
                        >
                          <TimesIcon />
                        </Button>
                      </div>
                    )}
                  </div>
                  <ModalFooter className="self-end grow items-end">
                    <Button
                      color="primary"
                      type="submit"
                      // isDisabled={files.length < 1}
                    >
                      Simpan
                    </Button>
                    <Button color="danger" variant="light" onPress={onClose}>
                      Tutup
                    </Button>
                  </ModalFooter>
                </form>
              </ModalBody>
            </>
          )}
        </ModalContent>
      </Modal>
    </div>
  );
}