import { Component, JSX } from "preact"
import { FoodExcludeTypes } from "./types";

export const FoodItemsContainer = (props: {
  children: JSX.Element | JSX.Element[] | null
  title: string,
  extra?: string,
}): JSX.Element => {
  return (
    <div>
      <h3>{props.title}</h3>
      {props.extra && <p>{props.extra}</p>}
      <div class="list-group" role="list">
        {props.children}
      </div>
    </div>
  );
}

function shouldShowItem(contents, exclude: FoodExcludeTypes): boolean {
  if (!exclude) return false;
  for (let key of Object.keys(exclude)) {
    if (Object.keys(contents).includes(key)) {
      if (!exclude[key]) return false;
    }
  }
  return true;
}

type BaseFoodItemProps = {
  contents?: Partial<FoodExcludeTypes>,
  exclude?: FoodExcludeTypes,
}

const HideIfFoodExcluded = (props: BaseFoodItemProps & { children: JSX.Element }) => {
  if (!props.contents) {
    return props.children;
  } else if (shouldShowItem(props.contents, props.exclude)) {
    return props.children;
  } else {
    return <></>;
  }
}


type FoodItemProps = BaseFoodItemProps & {
  title: string,
};

export class FoodItem extends Component<FoodItemProps> {
  render() {
    return (
      <HideIfFoodExcluded {...this.props}>
        <div class="list-group-item" role="listitem">
          <p class="mb-1 h5">{this.props.title}</p>
        </div>
      </HideIfFoodExcluded>
    )
  }
}

export class AdvancedFoodItem extends Component<FoodItemProps & { extra: string }> {
  render() {
    return (
      <HideIfFoodExcluded {...this.props}>
        <div class="list-group-item" role="listitem">
          <p class="mb-1 h5">{this.props.title}</p>
          <p class="mb-1">{this.props.extra}</p>
        </div>
      </HideIfFoodExcluded>
    )
  }
}