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

import styles from "./eventFilter.module.scss";
import { VenueFragment } from "@/gql/graphql";
import Icon from "../general/Icon";

export const EventFilter = ({
  eventCategories,
  setCategory,
  activeCategory,
  eventOrganizers,
  setOrganizer,
  activeOrganizer,
  venues,
  activeVenue,
  setVenue,
  resetFilters,
  toggleVisibility,
  isVisible,
}: {
  eventCategories: EventCategory[];
  setCategory: (slug: string | null) => void;
  activeCategory: string | null;
  eventOrganizers: EventOrganizer[];
  setOrganizer: (slug: string | null) => void;
  activeOrganizer: string | null;
  venues: VenueFragment[];
  activeVenue: string | null;
  setVenue: (slug: string | null) => void;
  resetFilters: () => void;
  toggleVisibility: () => 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 onResetFilters = (e: React.MouseEvent<HTMLButtonElement>) => {
    resetFilters();
    toggleVisibility();
  };

  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={activeCategory === category.slug}
                    onClick={() =>
                      setCategory(
                        activeCategory === category.slug ? null : category.slug
                      )
                    }
                  >
                    {category.name}
                  </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>
        {(activeCategory || activeOrganizer || activeVenue) && (
          <div className={styles.filterItem}>
            <button onClick={onResetFilters} className="button tertiary">
              <span>Vis alle</span>
              <Icon />
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

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

  let text = "";
  if (category && organizer && venue) {
    text = `${category.name} arrangert av ${organizer.name} ${venue.preposition} ${venue.title}`;
  } else if (category && organizer) {
    text = `${category.name} arrangert av ${organizer.name}`;
  } else if (category) {
    text = `Kategori: ${category.name}`;
  } 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>
  );
};
