"use client"

import { useState } from "react"
import {
  Dialog,
  DialogTrigger,
  Modal,
  ModalOverlay,
  Popover,
  Radio,
  RadioGroup,
} from "react-aria-components"
import { useIntl } from "react-intl"
import { useMediaQuery } from "usehooks-ts"

import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { useBookingCodeFilterStore } from "@/stores/bookingCode-filter"

import styles from "./bookingCodeFilter.module.css"

import { BookingCodeFilterEnum } from "@/types/enums/bookingCodeFilter"

export default function BookingCodeFilter() {
  const intl = useIntl()
  const [isOpen, setIsOpen] = useState(false)
  const activeCodeFilter = useBookingCodeFilterStore(
    (state) => state.activeCodeFilter
  )
  const setFilter = useBookingCodeFilterStore((state) => state.setFilter)
  const displayAsPopover = useMediaQuery("(min-width: 768px)")

  const bookingCodeFilterItems = [
    {
      label: intl.formatMessage({
        defaultMessage: "Booking code rates",
      }),
      value: BookingCodeFilterEnum.Discounted,
    },
    {
      label: intl.formatMessage({
        defaultMessage: "All rates",
      }),
      value: BookingCodeFilterEnum.All,
    },
  ]

  function updateFilter(selectedFilter: string) {
    setFilter(selectedFilter as BookingCodeFilterEnum)
  }

  return (
    <div className={styles.bookingCodeFilter}>
      <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
        <ChipButton variant="Outlined">
          {
            bookingCodeFilterItems.find(
              (item) => item.value === activeCodeFilter
            )?.label
          }
          <MaterialIcon
            icon="keyboard_arrow_down"
            size={20}
            color="CurrentColor"
          />
        </ChipButton>
        {displayAsPopover ? (
          <Popover placement="bottom end" isNonModal>
            <Dialog className={styles.dialog}>
              {({ close }) => {
                function handleChangeFilterValue(value: string) {
                  updateFilter(value)
                  close()
                }
                return (
                  <Typography variant="Body/Paragraph/mdRegular">
                    <RadioGroup
                      aria-label={intl.formatMessage({
                        defaultMessage: "Booking Code Filter",
                      })}
                      onChange={handleChangeFilterValue}
                      name="bookingCodeFilter"
                      value={activeCodeFilter}
                      className={styles.radioGroup}
                    >
                      {bookingCodeFilterItems.map((item) => (
                        <Radio
                          aria-label={item.label}
                          key={item.value}
                          value={item.value}
                          className={styles.radio}
                          autoFocus={activeCodeFilter === item.value}
                        >
                          {item.label}
                        </Radio>
                      ))}
                    </RadioGroup>
                  </Typography>
                )
              }}
            </Dialog>
          </Popover>
        ) : (
          <ModalOverlay className={styles.modalOverlay} isDismissable>
            <Modal className={styles.modal}>
              <Dialog className={styles.modalDialog}>
                {({ close }) => {
                  function handleChangeFilterValue(value: string) {
                    updateFilter(value)
                    close()
                  }
                  return (
                    <>
                      <div className={styles.header}>
                        <Typography variant="Title/Subtitle/md">
                          <h3>
                            {intl.formatMessage({
                              defaultMessage: "Room rates",
                            })}
                          </h3>
                        </Typography>
                        <IconButton
                          theme="Black"
                          style="Muted"
                          onPress={() => {
                            close()
                          }}
                        >
                          <MaterialIcon
                            icon="close"
                            size={24}
                            color="CurrentColor"
                          />
                        </IconButton>
                      </div>
                      <Typography variant="Body/Paragraph/mdRegular">
                        <RadioGroup
                          aria-label={intl.formatMessage({
                            defaultMessage: "Booking Code Filter",
                          })}
                          onChange={handleChangeFilterValue}
                          name="bookingCodeFilter"
                          value={activeCodeFilter}
                          className={styles.radioGroup}
                        >
                          {bookingCodeFilterItems.map((item) => (
                            <Radio
                              aria-label={item.label}
                              key={item.value}
                              value={item.value}
                              className={styles.radio}
                            >
                              {item.label}
                            </Radio>
                          ))}
                        </RadioGroup>
                      </Typography>
                    </>
                  )
                }}
              </Dialog>
            </Modal>
          </ModalOverlay>
        )}
      </DialogTrigger>
    </div>
  )
}
