import Modal from "@scandic-hotels/design-system/Modal"

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

import Description from "../Description"
import Steps from "../Steps"
import Summary from "./Summary"

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

import type { StepsProps } from "@/types/components/myPages/myStay/ancillaries"

export default function AddAncillaryModal({
  error,
  savedCreditCards,
  user,
}: StepsProps) {
  const { isOpen, closeModal, selectedAncillaryTitle, currentStep } =
    useAddAncillaryStore((state) => ({
      isOpen: state.isOpen,
      closeModal: state.closeModal,
      selectedAncillaryTitle: state.selectedAncillary?.title,
      currentStep: state.currentStep,
    }))
  return (
    <Modal
      isOpen={isOpen}
      onToggle={closeModal}
      title={selectedAncillaryTitle}
      withActions
      contentClassName={styles.modalContent}
      className={styles.modal}
    >
      <div className={styles.modalScrollable}>
        <Description />
        <Steps user={user} savedCreditCards={savedCreditCards} error={error} />
      </div>

      <Summary
        isConfirmation={currentStep === AncillaryStepEnum.confirmation}
      />
    </Modal>
  )
}