import { FaPlay } from "react-icons/fa";
import styles from "styles/menu/Menu.module.css";
import React, { KeyboardEvent, ReactNode, SyntheticEvent } from "react";
const Menu = ({
  barTitle = "Placeholder",
  height = "24rem",
  width = "80%",
  marginTop,
  marginBottom,
  marginLeft,
  marginRight,
  paddingTop,
  paddingBottom,
  paddingLeft,
  paddingRight,
  alignCenter,
  alignBarAtStart = false,
  barFontSize,
  minHeight,
  maxHeight,
  overflow = "initial",
  contentMaxHeight,
  contentMinHeight,
  input = false,
  style = {},
  onInputChange = function (e) {},
  onSubmission = function (e) {},
  children,
}: props) => {
  async function onSubmit(e: SyntheticEvent<HTMLFormElement>) {
    e.preventDefault();
    onSubmission(e);
    return;
  }
  return (
    <div
      className={styles.wrapper}
      style={{
 ...style,
        height,
        width,
        marginTop,
        marginBottom,
        marginLeft,
        marginRight,
        maxHeight,
        minHeight,
      }}
    >
      <div
        className={styles.bar}
        style={{
          textAlign: alignBarAtStart ? "start" : "center",
          paddingLeft: alignBarAtStart ? "0.5rem" : "0",
          fontSize: barFontSize,
        }}
      >
        {barTitle}
      </div>
      <div
        style={{
          paddingTop,
          paddingBottom,
          paddingLeft,
          paddingRight,
          display: alignCenter ? "grid" : "block",
          overflowY: overflow,
          overflowX: "hidden",
          maxHeight: contentMaxHeight,
          minHeight: contentMinHeight,
          placeItems: "center",
        }}
      >
        {children}
      </div>
      {input ? (
        <form onSubmit={onSubmit} className={styles.input_wrapper}>
          <input
            name="comment"
            className={styles.input}
            onChange={onInputChange}
            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) =>
              //@ts-ignore
              e.key === "Enter" && onSubmit(e)
            }
            placeholder="Send Comment..."
          />
          <button aria-label="Submit Content" className={styles.submit_button}>
            <FaPlay size={20} />
          </button>
        </form>
      ) : null}
    </div>
  );
};
interface props {
  barTitle?: string;
  height?: string;
  width?: string;
  marginTop?: number | string;
  marginBottom?: number | string;
  marginLeft?: number | string;
  marginRight?: number | string;
  paddingTop?: number | string;
  paddingBottom?: number | string;
  paddingLeft?: number | string;
  paddingRight?: number | string;
  alignCenter?: boolean;
  alignBarAtStart?: boolean;
  barFontSize?: number;
  minHeight?: number | string;
  maxHeight?: number | string;
  overflow?: React.CSSProperties["overflowY"];
  contentMaxHeight?: number | string;
  contentMinHeight?: number | string;
  input?: boolean;
  style?: React.CSSProperties;
  onInputChange?: (e: SyntheticEvent<HTMLInputElement>) => void;
  onSubmission?: (e: SyntheticEvent<HTMLFormElement>) => void;
  children?: ReactNode| null;
}
export default Menu;