import { DatePicker as ArkDatePicker, Portal } from '@ark-ui/react';
import { format, isSameDay } from 'date-fns';
import { FC } from 'react';
import { twx } from '@/utils';

interface DateRangePicker {
  value?: Date | null;
  title?: string;
  placeholder?: string[];
  autoFocus?: boolean;
  className?: string;
  withPortal?: boolean;
  onChange?: (value: Date[]) => void;
  onClear?: () => void;
}

export const DateRangePicker: FC<DateRangePicker> = ({
  // value,
  title,
  placeholder = ['Start Date', 'End Date'],
  autoFocus,
  className,
  withPortal = true,
  onChange,
  onClear,
}) => {
  const ViewContainer = withPortal ? Portal : 'div';

  return (
    <ArkDatePicker.Root
      autoFocus={autoFocus}
      selectionMode="range"
      className={className}
      format={(dateValue) => {
        return dateValue
          ? format(
              dateValue.toDate(
                Intl.DateTimeFormat().resolvedOptions().timeZone,
              ),
              'dd/MM/yyyy',
            )
          : '';
      }}
      onValueChange={({ value }) => {
        if (value.length >= 2) {
          const newStartDate = value[0].toDate(
            Intl.DateTimeFormat().resolvedOptions().timeZone,
          );
          const newEndData = value[1].toDate(
            Intl.DateTimeFormat().resolvedOptions().timeZone,
          );
          onChange?.([newStartDate, newEndData]);
        } else if (value.length == 0) onClear?.();
      }}
    >
      <div className="flex flex-col">
        {title ? (
          <div className="text-black/80 font-bold dark:text-white/80">
            {title}
          </div>
        ) : null}
        <ArkDatePicker.Control className="relative flex border border-white rounded-sm">
          <ArkDatePicker.Trigger
            asChild
            className="absolute h-full w-full cursor-pointer"
          >
            <div />
          </ArkDatePicker.Trigger>
          <ArkDatePicker.Input
            placeholder={placeholder[0]}
            className={twx([
              'focus:bg-white border-2 border-gray-2 dark:focus:bg-zinc-600 bg-transparent text-sm py-2 pl-2 outline-none  hover:brightness-110 dark:hover:brightness-115 transition-all focus:outline-none rounded-lg w-full',
            ])}
            disabled
          />
          <div className="flex items-center">
            <div className="i-ant-design-swap-right-outlined" />
          </div>
          <ArkDatePicker.Input
            placeholder={placeholder[1]}
            className={twx([
              'focus:bg-white border border-gray-2 dark:focus:bg-zinc-600 bg-red-1 bg-transparent text-sm py-2 pl-2 outline-none  hover:brightness-110 dark:hover:brightness-115 transition-all focus:outline-none rounded-lg w-full',
            ])}
            disabled
          />
          <div className="absolute bottom-0 right-0 top-0 flex items-center py-2 pr-2">
            {onClear && (
              <ArkDatePicker.ClearTrigger asChild>
                <div className="relative h-6 w-6 p-1">
                  <div className="i-ant-design-close-circle-filled h-full w-full cursor-pointer text-black/80 dark:text-white/80 hover:text-black/60 hover:dark:text-white/60" />
                </div>
              </ArkDatePicker.ClearTrigger>
            )}
            <div className="relative">
              <div className="i-ant-design-calendar-outlined" />
            </div>
          </div>
        </ArkDatePicker.Control>
      </div>
      <ViewContainer>
        <ArkDatePicker.Positioner>
          <ArkDatePicker.Content className="z-21 flex flex-col items-center items-stretch border-1 border-gray-600 rounded-lg bg-white p-1 text-black/80 shadow-lg !visible dark:border-zinc-600 dark:bg-zinc-700 dark:text-white/80">
            <ArkDatePicker.View view="day">
              <ArkDatePicker.Context>
                {(api) => (
                  <>
                    <ArkDatePicker.ViewControl className="w-full flex items-center justify-between">
                      <ArkDatePicker.PrevTrigger className="relative h-9 w-9 rounded-full bg-transparent p-1 hover:backdrop-brightness-90 dark:hover:backdrop-brightness-110">
                        <div className="i-mdi-chevron-left h-full w-full" />
                      </ArkDatePicker.PrevTrigger>
                      <ArkDatePicker.ViewTrigger className="flex-1 rounded-lg bg-transparent p-2 font-bold hover:backdrop-brightness-90 dark:hover:backdrop-brightness-110">
                        <ArkDatePicker.RangeText />
                      </ArkDatePicker.ViewTrigger>
                      <ArkDatePicker.NextTrigger className="relative h-9 w-9 rounded-full bg-transparent p-1 hover:backdrop-brightness-90 dark:hover:backdrop-brightness-110">
                        <div className="i-mdi-chevron-right h-full w-full" />
                      </ArkDatePicker.NextTrigger>
                    </ArkDatePicker.ViewControl>
                    <ArkDatePicker.Table className="w-full">
                      <ArkDatePicker.TableHead>
                        <ArkDatePicker.TableRow>
                          {api.weekDays.map((weekDay, id) => (
                            <ArkDatePicker.TableHeader
                              key={id}
                              className="rounded-lg p-2"
                            >
                              {weekDay.narrow}
                            </ArkDatePicker.TableHeader>
                          ))}
                        </ArkDatePicker.TableRow>
                      </ArkDatePicker.TableHead>
                      <ArkDatePicker.TableBody>
                        {api.weeks.map((week, id) => (
                          <ArkDatePicker.TableRow key={id}>
                            {week.map((day, id) => (
                              <ArkDatePicker.TableCell key={id} value={day}>
                                <ArkDatePicker.TableCellTrigger className="data-[selected]:bg-blue-400 relative h-10 w-10 rounded-lg bg-transparent p-2 text-center data-[outside-range]:pointer-events-none data-[outside-range]:text-black/30 data-[selected]:text-white/80 data-[selected]:font-bold data-[in-range]:backdrop-brightness-90 hover:backdrop-brightness-85 dark:data-[outside-range]:text-white/30 dark:data-[in-range]:backdrop-brightness-130 dark:hover:backdrop-brightness-135">
                                  {day.day}
                                  {isSameDay(
                                    day.toDate(
                                      Intl.DateTimeFormat().resolvedOptions()
                                        .timeZone,
                                    ),
                                    new Date(),
                                  ) ? (
                                    <div className="absolute bottom-0 left-0 w-full flex items-center justify-center pb-1">
                                      <div className="bg-blue-400 h-1 w-3.5 rounded-full" />
                                    </div>
                                  ) : null}
                                </ArkDatePicker.TableCellTrigger>
                              </ArkDatePicker.TableCell>
                            ))}
                          </ArkDatePicker.TableRow>
                        ))}
                      </ArkDatePicker.TableBody>
                    </ArkDatePicker.Table>
                  </>
                )}
              </ArkDatePicker.Context>
            </ArkDatePicker.View>
            <ArkDatePicker.View view="month">
              <ArkDatePicker.Context>
                {(api) => (
                  <>
                    <ArkDatePicker.ViewControl className="w-full flex items-center justify-between">
                      <ArkDatePicker.PrevTrigger className="relative h-9 w-9 rounded-full bg-transparent p-1 hover:backdrop-brightness-90 dark:hover:backdrop-brightness-110">
                        <div className="i-mdi-chevron-left h-full w-full" />
                      </ArkDatePicker.PrevTrigger>
                      <ArkDatePicker.ViewTrigger className="flex-1 rounded-lg bg-transparent p-2 font-bold hover:backdrop-brightness-90 dark:hover:backdrop-brightness-110">
                        <ArkDatePicker.RangeText />
                      </ArkDatePicker.ViewTrigger>
                      <ArkDatePicker.NextTrigger className="relative h-9 w-9 rounded-full bg-transparent p-1 hover:backdrop-brightness-90 dark:hover:backdrop-brightness-110">
                        <div className="i-mdi-chevron-right h-full w-full" />
                      </ArkDatePicker.NextTrigger>
                    </ArkDatePicker.ViewControl>
                    <ArkDatePicker.Table className="w-full">
                      <ArkDatePicker.TableBody>
                        {api
                          .getMonthsGrid({ columns: 4, format: 'short' })
                          .map((months, id) => (
                            <ArkDatePicker.TableRow key={id}>
                              {months.map((month, id) => (
                                <ArkDatePicker.TableCell
                                  key={id}
                                  value={month.value}
                                >
                                  <ArkDatePicker.TableCellTrigger className="h-10 w-full rounded-lg bg-transparent p-2 text-center data-[outside-range]:pointer-events-none data-[outside-range]:text-black/30 data-[in-range]:backdrop-brightness-90 hover:backdrop-brightness-85 dark:data-[outside-range]:text-white/30 dark:data-[in-range]:backdrop-brightness-110 dark:hover:backdrop-brightness-115">
                                    {month.label}
                                  </ArkDatePicker.TableCellTrigger>
                                </ArkDatePicker.TableCell>
                              ))}
                            </ArkDatePicker.TableRow>
                          ))}
                      </ArkDatePicker.TableBody>
                    </ArkDatePicker.Table>
                  </>
                )}
              </ArkDatePicker.Context>
            </ArkDatePicker.View>
            <ArkDatePicker.View view="year">
              <ArkDatePicker.Context>
                {(api) => (
                  <>
                    <ArkDatePicker.ViewControl className="w-full flex items-center justify-between">
                      <ArkDatePicker.PrevTrigger className="relative h-9 w-9 rounded-full bg-transparent p-1 hover:backdrop-brightness-90 dark:hover:backdrop-brightness-110">
                        <div className="i-mdi-chevron-left h-full w-full" />
                      </ArkDatePicker.PrevTrigger>
                      <ArkDatePicker.ViewTrigger className="flex-1 rounded-lg bg-transparent p-2 font-bold hover:backdrop-brightness-90 dark:hover:backdrop-brightness-110">
                        <ArkDatePicker.RangeText />
                      </ArkDatePicker.ViewTrigger>
                      <ArkDatePicker.NextTrigger className="relative h-9 w-9 rounded-full bg-transparent p-1 hover:backdrop-brightness-90 dark:hover:backdrop-brightness-110">
                        <div className="i-mdi-chevron-right h-full w-full" />
                      </ArkDatePicker.NextTrigger>
                    </ArkDatePicker.ViewControl>
                    <ArkDatePicker.Table className="w-full">
                      <ArkDatePicker.TableBody>
                        {api.getYearsGrid({ columns: 4 }).map((years, id) => (
                          <ArkDatePicker.TableRow key={id}>
                            {years.map((year, id) => (
                              <ArkDatePicker.TableCell
                                key={id}
                                value={year.value}
                              >
                                <ArkDatePicker.TableCellTrigger className="h-10 w-full rounded-lg bg-transparent p-2 data-[outside-range]:pointer-events-none data-[outside-range]:text-black/30 data-[in-range]:backdrop-brightness-90 hover:backdrop-brightness-85 dark:data-[outside-range]:text-white/30 dark:data-[in-range]:backdrop-brightness-110 dark:hover:backdrop-brightness-115">
                                  {year.label}
                                </ArkDatePicker.TableCellTrigger>
                              </ArkDatePicker.TableCell>
                            ))}
                          </ArkDatePicker.TableRow>
                        ))}
                      </ArkDatePicker.TableBody>
                    </ArkDatePicker.Table>
                  </>
                )}
              </ArkDatePicker.Context>
            </ArkDatePicker.View>
          </ArkDatePicker.Content>
        </ArkDatePicker.Positioner>
      </ViewContainer>
    </ArkDatePicker.Root>
  );
};
