"use client"

import { useIntl } from "react-intl"

import { useDestinationDataStore } from "@/stores/destination-data"

import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
import Alert from "@/components/TempDesignSystem/Alert"
import Body from "@/components/TempDesignSystem/Text/Body"

import CityListItem from "../CityListItem"
import CityListSkeleton from "./CityListSkeleton"

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

import { AlertTypeEnum } from "@/types/enums/alert"

export default function CityList() {
  const intl = useIntl()
  const { activeCities, isLoading } = useDestinationDataStore((state) => ({
    activeCities: state.activeCities,
    isLoading: state.isLoading,
  }))

  return isLoading ? (
    <CityListSkeleton />
  ) : (
    <div className={styles.cityListWrapper}>
      <div className={styles.header}>
        <Body>
          {intl.formatMessage(
            {
              defaultMessage: "{count} destinations",
            },
            { count: activeCities.length }
          )}
        </Body>
        <DestinationFilterAndSort listType="city" />
      </div>
      {activeCities.length === 0 ? (
        <Alert
          type={AlertTypeEnum.Info}
          heading={intl.formatMessage({
            defaultMessage: "No matching locations found",
          })}
          text={intl.formatMessage({
            defaultMessage:
              "It looks like no location match your filters. Try adjusting your search to find the perfect stay.",
          })}
        />
      ) : (
        <ul className={styles.cityList}>
          {activeCities.map((city) => (
            <li key={city.system.uid}>
              <CityListItem city={city} />
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}
