import React, { useState } from "react";
import {
  DropdownListContainer,
  DropdownHeader,
  DropdownIcon,
  DropdownTitle,
  ListContainer,
  ToggleIconClosed,
  ToggleIconOpened,
  DropdownOptions,
  ToggleContainer,
} from "./DropdownList.styled";
import PropTypes from "prop-types";

const DropdownList = (props) => {
  const [listShown, setListShown] = useState(props.defaultOpen);
  const handleShow = () => {
    if (props.setIsOpened) {
      props.setIsOpened(!listShown);
    }
    setListShown((prevState) => !prevState);
  };
  return (
    <DropdownListContainer fullwidth={props.fullWidth ? 1 : 0}>
      <DropdownHeader>
        {props.dropdownIcon && (
          <DropdownIcon onClick={() => handleShow()}>
            {props.dropdownIcon}
          </DropdownIcon>
        )}
        <DropdownTitle onClick={() => handleShow()} textcolor={props.textcolor}>
          {props.title}
        </DropdownTitle>
        {listShown ? (
          <ToggleIconOpened
            style={props.toggleIconStyles}
            onClick={() => handleShow()}
          >
            {props.toggleIconOpened}
          </ToggleIconOpened>
        ) : (
          <ToggleIconClosed
            style={props.toggleIconStyles}
            onClick={() => handleShow()}
          >
            {props.toggleIconClosed}
          </ToggleIconClosed>
        )}
      </DropdownHeader>
      <ToggleContainer shouldShow={listShown}>
        <DropdownOptions>{props.headerOptions}</DropdownOptions>
        <ListContainer>{props.children}</ListContainer>
      </ToggleContainer>
    </DropdownListContainer>
  );
};

export default DropdownList;

DropdownList.propTypes = {
  title: PropTypes.string,
  dropdownIcon: PropTypes.node,
  toggleIconOpened: PropTypes.node,
  toggleIconClosed: PropTypes.node,
  children: PropTypes.node,
  fullWidth: PropTypes.bool,
  defaultOpen: PropTypes.bool,
  toggleIconStyles: PropTypes.any,
  headerOptions: PropTypes.node,
  textcolor: PropTypes.string,
  setIsOpened: PropTypes.func,
};

DropdownList.defaultProps = {
  fullWidth: false,
  defaultOpen: false,
};