"use client"

import { useIntl } from "react-intl"

import Select from "@/components/TempDesignSystem/Select"

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

import type { Key } from "react-aria-components"

import type { JobylonFilterItem } from "@/types/components/blocks/jobylonFeed"
import { JobylonFilterKey } from "@/types/enums/jobylonFeed"

interface FilterProps {
  onFilterChange: (filter: JobylonFilterKey, value: Key) => void
  countryFilters: JobylonFilterItem[]
  cityFilters: JobylonFilterItem[]
  departmentFilters: JobylonFilterItem[]
  categoryFilters: JobylonFilterItem[]
}

export default function Filter({
  onFilterChange,
  countryFilters,
  cityFilters,
  departmentFilters,
  categoryFilters,
}: FilterProps) {
  const intl = useIntl()

  return (
    <form className={styles.filterForm}>
      <Select
        items={countryFilters}
        defaultSelectedKey={""}
        label={intl.formatMessage({
          defaultMessage: "Country",
        })}
        aria-label={intl.formatMessage({
          defaultMessage: "Country",
        })}
        name="country"
        onSelect={(value) => onFilterChange(JobylonFilterKey.country, value)}
      />
      <Select
        items={cityFilters}
        defaultSelectedKey={""}
        label={intl.formatMessage({
          defaultMessage: "Location (shown in local language)",
        })}
        aria-label={intl.formatMessage({
          defaultMessage: "Location (shown in local language)",
        })}
        name="city"
        onSelect={(value) => onFilterChange(JobylonFilterKey.city, value)}
      />
      <Select
        items={departmentFilters}
        defaultSelectedKey={""}
        label={intl.formatMessage({
          defaultMessage: "Hotel or office",
        })}
        aria-label={intl.formatMessage({
          defaultMessage: "Hotel or office",
        })}
        name="department"
        onSelect={(value) => onFilterChange(JobylonFilterKey.department, value)}
      />
      <Select
        items={categoryFilters}
        defaultSelectedKey={""}
        label={intl.formatMessage({
          defaultMessage: "Category",
        })}
        aria-label={intl.formatMessage({
          defaultMessage: "Category",
        })}
        name="category"
        onSelect={(value) => onFilterChange(JobylonFilterKey.category, value)}
      />
    </form>
  )
}
