import { EventCategory, EventOrganizer } from "@/lib/event";

import styles from "./eventFilter.module.scss";
import { VenueFragment } from "@/gql/graphql";
import { formatHumanReadableList } from "@/lib/common";

export const EventFilter = ({
  eventCategories,
  setCategories,
  activeCategories,
  eventOrganizers,
  setOrganizer,
  activeOrganizer,
  venues,
  activeVenue,
  setVenue,
  isVisible,
}: {
  eventCategories: EventCategory[];
  setCategories: (slug: string[] | null) => void;
  activeCategories: string[] | null;
  eventOrganizers: EventOrganizer[];
  setOrganizer: (slug: string | null) => void;
  activeOrganizer: string | null;
  venues: VenueFragment[];
  activeVenue: string | null;
  setVenue: (slug: string | null) => void;
  isVisible: boolean;
}) => {
  const onOrganizerSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const organizer = e.target.value;
    setOrganizer(organizer === "" ? null : organizer);
  };
  const onVenueSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const venue = e.target.value;
    setVenue(venue === "" ? null : venue);
  };
  const toggleCategory = (category: string) => {
    const newCategories = activeCategories?.includes(category)
      ? activeCategories?.filter((x) => x !== category)
      : [...(activeCategories ?? []), category];
    setCategories(newCategories.length === 0 ? null : newCategories);
  };

  return (
    <div className={styles.eventFilter} data-show={isVisible}>
      <div className={styles.filterContent}>
        <div className={styles.filterItem}>
          <span className={styles.filterHeading}>Kategori</span>
          <ul>
            {eventCategories
              .filter((x) => x.showInFilters)
              .map((category) => (
                <li key={category.slug}>
                  <button
                    className="button toggler"
                    data-active={activeCategories?.includes(category.slug)}
                    onClick={() => toggleCategory(category.slug)}
                  >
                    <span>{category.name}</span>
                  </button>
                </li>
              ))}
          </ul>
        </div>
        <div className={styles.filterItem}>
          <label htmlFor="venue" className={styles.filterHeading}>
            Lokale
          </label>
          <select
            name="venue"
            value={activeVenue ?? ""}
            onChange={onVenueSelect}
          >
            <option value="">Vis alle</option>
            {venues.map((venue) => (
              <option key={venue.slug} value={venue.slug}>
                {venue.title}
              </option>
            ))}
          </select>
        </div>
        <div className={styles.filterItem}>
          <label htmlFor="organizer" className={styles.filterHeading}>
            Arrangør
          </label>
          <select
            name="organizer"
            value={activeOrganizer ?? ""}
            onChange={onOrganizerSelect}
          >
            <option value="">Vis alle</option>
            {eventOrganizers.map((organizer) => (
              <option key={organizer.slug} value={organizer.slug}>
                {organizer.name}
              </option>
            ))}
          </select>
        </div>
      </div>
    </div>
  );
};

export const EventFilterExplained = ({
  eventCategories,
  activeCategories,
  eventOrganizers,
  activeOrganizer,
  venues,
  activeVenue,
}: {
  eventCategories: EventCategory[];
  activeCategories: string[] | null;
  eventOrganizers: EventOrganizer[];
  activeOrganizer: string | null;
  venues: VenueFragment[];
  activeVenue: string | null;
}) => {
  const categories = eventCategories.filter((x) =>
    activeCategories?.includes(x.slug)
  );
  const organizer =
    activeOrganizer && eventOrganizers.find((x) => x.slug === activeOrganizer);
  const venue = activeVenue && venues.find((x) => x.slug === activeVenue);

  const categoryList = formatHumanReadableList(categories.map((x) => x.name));
  const hasCategories = categoryList.length !== 0;

  let text = "";
  if (hasCategories && organizer && venue) {
    text = `${categoryList} av ${organizer.name} ${venue.preposition} ${venue.title}`;
  } else if (hasCategories && organizer) {
    text = `${categoryList} av ${organizer.name}`;
  } else if (hasCategories && venue) {
    text = `${categoryList} ${venue.preposition} ${venue.title}`;
  } else if (hasCategories) {
    text = `${categoryList}`;
  } else if (organizer && venue) {
    text = `Arrangeres av ${organizer.name} ${venue.preposition} ${venue.title}`;
  } else if (organizer) {
    text = `Arrangeres av ${organizer.name}`;
  } else if (venue) {
    text = `Arrangementer ${venue.preposition} ${venue.title}`;
  }

  if (text === "") {
    return <></>;
  }

  return (
    <div className={styles.eventFilterExplained}>
      <h2>{text}</h2>
    </div>
  );
};
