"use client";

import { useTheme } from "@mui/material/styles";
import type { SxProps, Theme } from "@mui/material/styles";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { enUS } from "date-fns/locale/en-US";

import { getFormBorderColor } from "@/components/ui/form";
import { SubmitDateIcon } from "@/components/ui/icon";

export type AppDatePickerProps = {
  clearable?: boolean;
  disabled?: boolean;
  error?: boolean;
  format?: string;
  onChange: (date: Date | null) => void;
  placeholder?: string;
  popperZIndex?: number;
  showToday?: boolean;
  sx?: SxProps<Theme>;
  value: Date | null;
};

function getSxArray(sx?: SxProps<Theme>) {
  if (!sx) return [];

  return Array.isArray(sx) ? sx : [sx];
}

function escapeCssContent(value: string) {
  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
}

export function AppDatePicker({
  clearable = true,
  disabled = false,
  error = false,
  format = "MMMM d, yyyy",
  onChange,
  placeholder = "Select date",
  popperZIndex = 1700,
  showToday = true,
  sx,
  value,
}: AppDatePickerProps) {
  const theme = useTheme();
  const borderColor = getFormBorderColor(theme);
  const placeholderContent = escapeCssContent(placeholder);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={enUS}>
      <DatePicker
        disabled={disabled}
        value={value}
        onChange={onChange}
        format={format}
        slots={{
          openPickerIcon: SubmitDateIcon,
        }}
        slotProps={{
          actionBar: showToday
            ? {
                actions: ["today"],
                sx: {
                  minHeight: 48,
                  px: 2,
                  py: 0.5,
                  justifyContent: "flex-start",
                  borderTop: `1px solid ${borderColor}`,
                  "& .MuiButton-root": {
                    minWidth: 54,
                    minHeight: 32,
                    px: 1.5,
                    border: `1px solid ${borderColor}`,
                    borderRadius: "6px",
                    color: "text.primary",
                    fontSize: 11,
                    fontWeight: 500,
                    textTransform: "none",
                  },
                },
              }
            : undefined,
          field: {
            clearable,
            openPickerButtonPosition: "start",
            clearButtonPosition: "end",
          },
          popper: {
            sx: { zIndex: popperZIndex },
          },
          textField: {
            fullWidth: true,
            error,
            sx: [
              {
                width: "100%",
                minWidth: 0,
                "& .MuiPickersOutlinedInput-root, & .MuiOutlinedInput-root": {
                  width: "100%",
                  height: 40,
                  minHeight: 40,
                  minWidth: 0,
                  borderRadius: "6px",
                  bgcolor: theme.palette.background.paper,
                  fontSize: 12,
                  py: 0,
                },
                "& .MuiPickersOutlinedInput-notchedOutline, & .MuiOutlinedInput-notchedOutline":
                  {
                    borderColor,
                  },
                "& .MuiPickersInputBase-input, & .MuiInputBase-input": {
                  minWidth: 0,
                  overflow: "hidden",
                  fontSize: 12,
                  fontWeight: 400,
                  lineHeight: 1.24,
                  textOverflow: "ellipsis",
                  py: 0,
                },
                "& .MuiPickersSectionList-root": {
                  position: "relative",
                  py: 0,
                  ...(!value
                    ? {
                        "& > *": {
                          visibility: "hidden",
                        },
                        "&::before": {
                          content: `"${placeholderContent}"`,
                          position: "absolute",
                          top: "50%",
                          left: 0,
                          color: theme.palette.text.secondary,
                          fontSize: 12,
                          fontWeight: 400,
                          whiteSpace: "nowrap",
                          pointerEvents: "none",
                          transform: "translateY(-50%)",
                          visibility: "visible",
                        },
                      }
                    : {}),
                },
              },
              ...getSxArray(sx),
            ],
          },
          openPickerButton: {
            sx: {
              ml: -0.5,
              mr: 0.5,
              color: "text.secondary",
              "& .MuiSvgIcon-root": { fontSize: 20 },
            },
          },
        }}
      />
    </LocalizationProvider>
  );
}