import React, { useState, useEffect } from "react";
import { Container } from "../Container";
import { Typography } from "../Typography";
import { Popover } from "../Popover";
import { Button } from "../Button";
import { IconButton } from "../IconButton";
import { Grid } from "../Grid";
import { Flex } from "../Flex";
import { Input } from "../Input";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export function DatePicker({
  onSelectADate = () => {},
  onCancel = () => {},
  position = "bottom right",
  size = "small",
  inputSize = "medium",
  leftIcon,
  rightIcon,
  gridSpacing = 1,
  width,
  color = "primary",
  backgroundColor = "background",
  inputColor = "basic",
  maxYears = 200,
  inputProps = {},
  wrapperProps,
  disabled,
  endAdornment,
  error,
  fullWidth,
  helperText,
  label,
  name,
  placeholder,
  required,
  startAdornment,
  value,
  onChange,
  onBlur
}) {
  const [referenceCalendar, setReferenceCalendar] = useState(null);
  const currentDate = new Date();
  const [dateCalendar, setDateCalendar] = useState({
    year: currentDate.getFullYear(),
    month: currentDate.getMonth() + 1
  }); // modal handling

  const [open, setOpen] = useState(false);
  const today = currentDate.getDate();
  const todayMonth = currentDate.getMonth();
  const todayYear = currentDate.getFullYear();
  const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  const maxDays = new Date(dateCalendar.year, dateCalendar.month, 0).getDate();
  const weekStart = new Date(dateCalendar.year, dateCalendar.month, -(maxDays - 1)).getDay();
  const weekEnd = new Date(dateCalendar.year, dateCalendar.month, 0).getDay();
  let calendarDays = []; // Caso a semana não comece no domingo, exibir dias anterioes como -1

  for (let i = 0; i < weekStart; i++) {
    calendarDays.push(-1);
  } // Exibir dias do mês


  for (let i = 0; i < maxDays; i++) {
    calendarDays.push(i + 1);
  } // Caso a semana não termine no sabado, exibir dias restantes como -1


  for (let i = 0; i < 6 - weekEnd; i++) {
    calendarDays.push(-1);
  } // Voltar mês


  function handleMonthBack() {
    let _clone = JSON.parse(JSON.stringify(dateCalendar));

    if (_clone.month - 1 > 0) {
      _clone.month -= 1;
    } else {
      _clone.month = 12;
      _clone.year -= 1;
    }

    setDateCalendar(_clone);
  } // Avançar mês


  function handleMonthForward() {
    let _clone = JSON.parse(JSON.stringify(dateCalendar));

    if (_clone.month + 1 <= 12) {
      _clone.month += 1;
    } else {
      _clone.month = 1;
      _clone.year += 1;
    }

    setDateCalendar(_clone);
  } // Voltar ano
  // function handleYearBack() {
  //   let _clone = JSON.parse(JSON.stringify(dateCalendar));
  //   _clone.year -= 1;
  //   setDateCalendar(_clone);
  // }
  // Escolher ano


  function handleSetYear(value) {
    let _clone = JSON.parse(JSON.stringify(dateCalendar));

    _clone.year = Number.parseInt(value);
    setDateCalendar(_clone);
  } // Escolher mês


  function handleSetMonth(value) {
    let _clone = JSON.parse(JSON.stringify(dateCalendar));

    _clone.month = Number.parseInt(value);
    setDateCalendar(_clone);
  } // Converter data de 24052022 para 24/05/2022
  // function handleDateSelect(value) {
  //   let t = "";
  //   if (value && value != "") {
  //     for (let char of value.toString()) {
  //       if (Number.isInteger(Number.parseInt(char))) {
  //         if (t.length == 2 || t.length == 5) {
  //           t += "/";
  //         }
  //         t += char;
  //         if (t.length == 10) {
  //           break;
  //         }
  //       }
  //     }
  //   } else {
  //     t = "--/--/--";
  //   }
  //   return t;
  // }
  // Dividir dias do mês em linhas com 7 dias


  function divideDate(days) {
    let response = [];
    let current = 0;

    for (let day of days) {
      if (response[current] == null) {
        response.push([]);
      }

      if (response[current].length > 6) {
        response.push([]);
        current += 1;
      }

      response[current].push(day);
    }

    return response;
  } // useEffect(() => {
  //   if (ref) {
  //   }
  // }, [ref]);


  useEffect(() => {
    function onclick(event) {
      if (referenceCalendar && referenceCalendar.current) {
        if (!referenceCalendar.current.contains(event.target)) {
          onCancel();
        }
      }
    }

    window.addEventListener("click", onclick);
    return () => window.removeEventListener("click", onclick);
  }, [referenceCalendar]);
  const [yearEditable, setYearEditable] = useState(false);

  const handleToggleYearEditable = () => {
    setYearEditable(!yearEditable);
  };

  const [monthEditable, setMonthEditable] = useState(false);

  const handleToggleMonthEditable = () => {
    setMonthEditable(!monthEditable);
  };

  const [selectedComponentDate, setSelectedComponentDate] = useState(null);
  const [componentDate, setComponentDate] = useState(value || new Date(todayYear - 10, 0, 1));

  const handleTogglePopover = () => {
    setOpen(!open);
    setYearEditable(false);
    setMonthEditable(false);
  };

  const handleSelectDate = selectedDate => {
    const {
      year,
      month,
      day
    } = selectedDate;
    const toDate = new Date(year, month - 1, day);
    setComponentDate(toDate);
    onSelectADate(selectedDate);
    setSelectedComponentDate(selectedDate);
    handleTogglePopover();
  };

  return /*#__PURE__*/_jsx(Popover, {
    arrow: true,
    backgroundColor: backgroundColor,
    visible: open,
    position: position,
    backdrop: true,
    onBackdropClick: () => handleTogglePopover(),
    width: width,
    style: { ...(wrapperProps == null ? void 0 : wrapperProps.style)
    },
    ...wrapperProps,
    content: /*#__PURE__*/_jsx(Container, {
      ref: el => setReferenceCalendar(el),
      backgroundColor: backgroundColor,
      children: /*#__PURE__*/_jsxs("div", {
        children: [/*#__PURE__*/_jsxs(Flex, {
          direction: "row",
          align: "center",
          justify: "between",
          wrap: "nowrap",
          children: [/*#__PURE__*/_jsx(IconButton, {
            size: size,
            onClick: () => handleMonthBack(),
            backgroundColor: color,
            children: leftIcon || /*#__PURE__*/_jsx(_Fragment, {
              children: "<"
            })
          }), /*#__PURE__*/_jsxs(Flex, {
            children: [/*#__PURE__*/_jsx(Popover, {
              visible: monthEditable,
              backdrop: true,
              arrow: true,
              spacing: 1,
              onBackdropClick: () => handleToggleMonthEditable(),
              backdropProps: {
                noPortal: true,
                color: "transparent",
                style: {
                  zIndex: 1
                }
              },
              width: "100%",
              content: /*#__PURE__*/_jsx(Flex, {
                style: {
                  overflow: "auto",
                  maxHeight: "150px"
                },
                children: months.map((month, index) => /*#__PURE__*/_jsx(Button, {
                  size: size,
                  fullWidth: true,
                  shape: "rounded",
                  variant: "ghost",
                  backgroundColor: color,
                  onClick: () => {
                    handleSetMonth(index + 1);
                    handleToggleMonthEditable();
                  },
                  children: month
                }, index))
              }),
              children: /*#__PURE__*/_jsx(Button, {
                shape: "square",
                variant: "ghost",
                size: size,
                style: {
                  zIndex: 1
                },
                backgroundColor: color,
                onClick: () => {
                  handleToggleMonthEditable();
                },
                children: months[dateCalendar.month - 1]
              })
            }), /*#__PURE__*/_jsx(Popover, {
              visible: yearEditable,
              backdrop: true,
              arrow: true,
              spacing: 1,
              onBackdropClick: () => handleToggleYearEditable(),
              backdropProps: {
                noPortal: true,
                color: "transparent",
                style: {
                  zIndex: 1
                }
              },
              width: "100%",
              content: /*#__PURE__*/_jsx(Flex, {
                style: {
                  overflow: "auto",
                  maxHeight: "150px"
                },
                children: Array.from({
                  length: maxYears
                }).map((_, index) => /*#__PURE__*/_jsx(Button, {
                  size: size,
                  fullWidth: true,
                  shape: "rounded",
                  variant: "ghost",
                  backgroundColor: color,
                  onClick: () => {
                    handleSetYear(index + todayYear - (maxYears - 1));
                    handleToggleYearEditable();
                  },
                  children: todayYear + index - (maxYears - 1)
                }, index.toString())).reverse()
              }),
              children: /*#__PURE__*/_jsx(Button, {
                shape: "square",
                variant: "ghost",
                size: size,
                backgroundColor: color,
                onClick: () => {
                  handleToggleYearEditable();
                },
                children: dateCalendar.year
              })
            })]
          }), /*#__PURE__*/_jsx(IconButton, {
            size: size,
            onClick: () => handleMonthForward(),
            backgroundColor: color,
            children: rightIcon || /*#__PURE__*/_jsx(_Fragment, {
              children: ">"
            })
          })]
        }), /*#__PURE__*/_jsxs(Grid, {
          container: true,
          spacing: gridSpacing,
          style: {
            marginTop: "0.5rem",
            marginBottom: "0.5rem"
          },
          children: [/*#__PURE__*/_jsx(Grid, {
            item: true,
            xs: 1.71,
            children: /*#__PURE__*/_jsx(Typography, {
              variant: "label",
              align: "center",
              component: "div",
              children: "SUN"
            })
          }), /*#__PURE__*/_jsx(Grid, {
            item: true,
            xs: 1.71,
            children: /*#__PURE__*/_jsx(Typography, {
              variant: "label",
              align: "center",
              component: "div",
              children: "MON"
            })
          }), /*#__PURE__*/_jsx(Grid, {
            item: true,
            xs: 1.71,
            children: /*#__PURE__*/_jsx(Typography, {
              variant: "label",
              align: "center",
              component: "div",
              children: "TUE"
            })
          }), /*#__PURE__*/_jsx(Grid, {
            item: true,
            xs: 1.71,
            children: /*#__PURE__*/_jsx(Typography, {
              variant: "label",
              align: "center",
              component: "div",
              children: "WED"
            })
          }), /*#__PURE__*/_jsx(Grid, {
            item: true,
            xs: 1.71,
            children: /*#__PURE__*/_jsx(Typography, {
              variant: "label",
              align: "center",
              component: "div",
              children: "THU"
            })
          }), /*#__PURE__*/_jsx(Grid, {
            item: true,
            xs: 1.71,
            children: /*#__PURE__*/_jsx(Typography, {
              variant: "label",
              align: "center",
              component: "div",
              children: "FRI"
            })
          }), /*#__PURE__*/_jsx(Grid, {
            item: true,
            xs: 1.71,
            children: /*#__PURE__*/_jsx(Typography, {
              variant: "label",
              align: "center",
              component: "div",
              children: "SAT"
            })
          })]
        }), /*#__PURE__*/_jsx("div", {
          children: divideDate(calendarDays).map((value, indexDivide) => {
            return /*#__PURE__*/_jsx(Grid, {
              container: true,
              spacing: gridSpacing,
              children: value.map((day, indexDay) => {
                if (day == -1) {
                  return /*#__PURE__*/_jsx(Grid, {
                    item: true,
                    xs: 1.71
                  }, indexDay + "day");
                }

                return /*#__PURE__*/_jsx(Grid, {
                  item: true,
                  xs: 1.71,
                  style: {
                    marginBottom: "0.5rem"
                  },
                  children: /*#__PURE__*/_jsx(Button, {
                    size: size,
                    fullWidth: true,
                    onClick: () => {
                      const selectedDate = {
                        year: dateCalendar.year,
                        month: dateCalendar.month,
                        day: day
                      };
                      handleSelectDate(selectedDate);
                    },
                    backgroundColor: color,
                    variant: // if its selected
                    selectedComponentDate && selectedComponentDate.year === dateCalendar.year && selectedComponentDate.month - 1 === dateCalendar.month - 1 && selectedComponentDate.day == day ? "contained" : // if its today
                    dateCalendar.year === todayYear && dateCalendar.month - 1 === todayMonth && day === today ? "outlined" : "ghost",
                    children: day
                  })
                }, indexDay + "day");
              })
            }, indexDivide);
          })
        })]
      })
    }),
    children: /*#__PURE__*/_jsx(Input, {
      type: "date",
      size: inputSize,
      color: inputColor,
      value: componentDate.toISOString().split("T")[0],
      name: name,
      placeholder: placeholder,
      label: label,
      startAdornment: startAdornment,
      endAdornment: endAdornment,
      disabled: disabled,
      error: error,
      helperText: helperText,
      required: required,
      fullWidth: fullWidth,
      onChange: onChange,
      onBlur: onBlur,
      onClick: e => {
        e.preventDefault();
        handleTogglePopover();
      },
      onKeyDown: e => {
        e.preventDefault();

        if (e.key === "Enter" || e.key === " " || e.key === "Escape") {
          handleTogglePopover();
        }
      },
      ...inputProps
    })
  });
}