import { useIntl } from "react-intl"

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

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

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

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

export default function SelectAncillaryStep() {
  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) => (
          <button
            key={categoryName}
            className={`${styles.chip} ${categoryName === selectedCategory ? styles.selected : ""}`}
            onClick={() => selectCategory(categoryName)}
          >
            <Typography variant="Body/Supporting text (caption)/smRegular">
              <p>
                {categoryName
                  ? categoryName
                  : intl.formatMessage({
                      defaultMessage: "Other",
                    })}
              </p>
            </Typography>
          </button>
        ))}
      </div>

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