import * as React from "react";
import Icon from "@sc/plugins/webcomponents/v2/Icon";
import { IconTypes } from "@sc/plugins/webcomponents/v2/Icon";

interface DropDownCollapseProps {
  /**
   * This is the text that will appear inside of the dropdown menu
   */
  text: string;

  /**
   * These are the <FancySelector /> elements that are collapsed inside of the dropdown element
   */
  children?: React.ReactNode;

  /**
   * Bool if the dropdown should be collapsed or expanded
   */
  isExpanded?: boolean;

  /**
   * This event is triggered when the dropdown is changed
   */
  onChange?: (newValue: boolean) => void;
}

const dropDownExpandedStyle: React.CSSProperties = {
  backgroundColor: "white",
  color: "#333",
  padding: 10,
  marginTop: 10,
};

const dropDownStyle: React.CSSProperties = {
  backgroundColor: "#999",
  padding: 10,
  margin: "10px 0",
  color: "white",
  cursor: "pointer",
  // ":hover": {
  //   backgroundColor: "#666",
  // },
};

/**
 * A dropdown menu of FancySelectors
 */
const DropDownCollapse: React.FC<DropDownCollapseProps> = ({
  children,
  isExpanded,
  text,
  onChange = () => null,
}) => {
  const [isExpandedState, setIsExpanded] = React.useState<boolean>(isExpanded);

  const handleChange = (value) => {
    setIsExpanded(value);
    onChange(value);
  };

  return (
    <div style={dropDownStyle}>
      <div
        data-testid="DropDownCollapse"
        onClick={() => handleChange(!isExpandedState)}
      >
        <div style={{ float: "right", marginTop: -5 }}>
          <Icon
            type={
              isExpandedState ? IconTypes.ArrowDropUp : IconTypes.ArrowDropDown
            }
            style={{ color: "white" }}
          />
        </div>
        <label>{text}</label>
      </div>
      {isExpandedState ? (
        <div
          data-testid="DropDownCollapse-Children"
          style={dropDownExpandedStyle}
        >
          {children}
        </div>
      ) : null}
    </div>
  );
};

export default DropDownCollapse;