"use client"

import Script from "next/script"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import classNames from "classnames"
import { faAngleDown, faClose } from "@fortawesome/free-solid-svg-icons"
import Image from "next/image"
import { forwardRef, useImperativeHandle, useState } from "react"

// **How to use Component
// Important Note: id_RangPicker

// **Use Component: <RangPickerCustom id="id_RangPicker" />

// **Get Start and End based on id_RangPicker
// const [query, setQuery] = useState<any>({})
// console.log("query", query);

// useEffect(() => {
// const handleDateRangeChange = (event: any) => {
//   const { start, end } = event.detail
//   const updatedQuery = { ...query, startDate: dayjs(start).unix(), endDate: dayjs(end).unix() }
//   setQuery(updatedQuery)
// }

//   window.addEventListener("id_RangPicker", handleDateRangeChange);

//   return () => {
//     window.removeEventListener("id_RangPicker", handleDateRangeChange);
//   };
// }, []);

interface IProps {
  id: string
  className?: string
  classBox?: string
  onClear?: () => void
  updateShowDatePicker?: (isShowDatePicker: boolean) => void
}

export const RangPickerCustom = forwardRef(({ id, className, classBox, onClear }: IProps, ref) => {
  const [isShowDatePicker, setIsShowDatePicker] = useState(false)
  const [dateRange, setDateRange] = useState({ start: 0, end: 0 })

  useImperativeHandle(ref, () => ({
    updateShowDatePicker(value: boolean, start: number, end: number) {
      setIsShowDatePicker(value)
      setDateRange({ start: Number(start) || 0, end: Number(end) || 0 })
    },
  }))

  return (
    <div className={classNames(`flex items-center ${className}`)}>
      <div
        id={id}
        className={`border-x border-y border-solid border-[var(--border-form-color)] py-[0.813rem] pl-4 pr-3 rounded-[5px] inline-flex items-center justify-between ${
          isShowDatePicker ? "!rounded-e-[0px] border-r-0" : "text-black/[.25]"
        } ${classBox}`}>
        <Image
          src={"/img/icon/calendar_outline.svg"}
          alt={"Calendar"}
          width={20}
          height={20}
          className="!w-5 !h-5"
        />
        &nbsp;
        {isShowDatePicker ? (
          <div className="flex">
            <span
              id="showDateRangePicker"
              className={`px-4 ${isShowDatePicker && !dateRange?.start && !dateRange?.end ? "text-black/[.25]" : ""}`}>
              Select Date
            </span>
          </div>
        ) : (
          <div
            className="flex"
            onClick={() => setIsShowDatePicker(true)}>
            <p
              id="hideDateRangePicker"
              className={`px-4 text-black/[.25]`}>
              Select Date
            </p>
            <div id="datePickerIconSelect">
              <FontAwesomeIcon
                icon={faAngleDown}
                className="!w-5 !h-5"
              />
            </div>
          </div>
        )}
      </div>
      {isShowDatePicker && (
        <div
          className={`!rounded-s-[0px] border-x border-y border-solid border-[var(--border-form-color)] text-black/[.25] py-[0.813rem] pl-4 pr-3 rounded-[5px] inline-flex items-center justify-between !h-full`}
          onClick={() => {
            setIsShowDatePicker(false)
            onClear && onClear()
          }}
          id="datePickerIconClear">
          <FontAwesomeIcon
            icon={faClose}
            className="!w-5 !h-[22px]"
          />
        </div>
      )}
      <Script key={`${id}-${dateRange?.start}-${dateRange?.end}`}>
        {`
          $(function() {
          
          const start = moment.unix(Number(${Number(dateRange?.start)})).isValid() ? moment.unix(Number(${Number(
            dateRange?.start,
          )})) : moment().subtract(29, 'days');
          const end = moment.unix(Number(${Number(dateRange?.end)})).isValid() ? moment.unix(Number(${Number(dateRange?.end)})) : moment();

          // const start = moment().subtract(29, 'days');
          // const end = moment();
  
          function cb(start, end) {
              $('#${id} #showDateRangePicker').html(start.format('MMM D, YYYY') + ' - ' + end.format('MMM D, YYYY'));
              $('#${id} #hideDateRangePicker').html("Select Date")
          }
  
          $('#${id}').daterangepicker({
              startDate: start,
              endDate: end,
              ranges: {
              'Today': [moment(), moment()],
              'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
              'Last 7 Days': [moment().subtract(6, 'days'), moment()],
              'Last 30 Days': [moment().subtract(29, 'days'), moment()],
              'This Month': [moment().startOf('month'), moment().endOf('month')],
              'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
              }
          }, cb);
  
          cb(start, end);

          // Fire an event when the value is applied
            $('#${id}').on('apply.daterangepicker', function(ev, picker) {
              const startDate = picker.startDate.format('YYYY-MM-DD');
              const endDate = picker.endDate.format('YYYY-MM-DD');

              // Send data via CustomEvent
              const event = new CustomEvent('${id}', {
                detail: {
                  start: startDate,
                  end: endDate,
                },
              });

              window.dispatchEvent(event);
            });
          });

          $('#datePickerIconSelect').on('click', function () {
            $(this).css('background-color', 'lightblue');
          });
          `}
      </Script>
    </div>
  )
})