import { useIntl } from "react-intl"

import { ChipButton } from "@scandic-hotels/design-system/ChipButton"

import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"

import WrappedAncillaryCard from "../../Card"

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

export default function SelectAncillaryStep({
  onClose,
}: {
  onClose: () => void
}) {
  const {
    ancillariesBySelectedCategory,
    selectedCategory,
    categories,
    selectCategory,
  } = useAddAncillaryStore((state) => ({
    categories: state.categories,
    selectedCategory: state.selectedCategory,
    ancillariesBySelectedCategory: state.ancillariesBySelectedCategory,
    selectCategory: state.selectCategory,
  }))
  const intl = useIntl()

  return (
    <div className={styles.container}>
      <div className={styles.tabs}>
        {categories.map((categoryName) => (
          <ChipButton
            onPress={() => selectCategory(categoryName)}
            key={categoryName}
            selected={categoryName === selectedCategory}
            variant="FilterRounded"
            size="Large"
          >
            {categoryName
              ? categoryName
              : intl.formatMessage({
                  id: "common.other",
                  defaultMessage: "Other",
                })}
          </ChipButton>
        ))}
      </div>

      <div className={styles.grid}>
        {ancillariesBySelectedCategory.map((ancillary) => (
          <WrappedAncillaryCard
            key={ancillary.id}
            ancillary={ancillary}
            onClose={onClose}
          />
        ))}
      </div>
    </div>
  )
}