import React from "react";
import PropTypes from "prop-types";
import DropdownList from "../../../../../Dropdown/DropdownList/DropdownList";
import selectedTheme from "../../../../../../themes";
import IconWithNumber from "../../../../../Icon/IconWithNumber/IconWithNumber";
import { ReactComponent as DropdownDown } from "../../../../../../assets/images/svg/down-arrow.svg";
import { ReactComponent as DropdownUp } from "../../../../../../assets/images/svg/up-arrow.svg";
import { ReactComponent as Close } from "../../../../../../assets/images/svg/close-white.svg";
import {
  SelectedItem,
  SelectedItemsContainer,
} from "./CheckboxDropdownList.styled";
import SearchField from "./SearchField/SearchField";

const CheckboxDropdownList = (props) => {
  const data = props.data;
  const handleDelete = (item) => {
    props.setItemsSelected([...props.filters.filter((p) => p !== item)]);
  };
  return (
    <DropdownList
      title={props.title}
      textcolor={
        props.filters.length > 0
          ? selectedTheme.primaryPurple
          : selectedTheme.primaryText
      }
      dropdownIcon={
        <IconWithNumber number={props.filters.length}>
          {props.icon}
        </IconWithNumber>
      }
      toggleIconClosed={<DropdownDown />}
      toggleIconOpened={<DropdownUp />}
      fullWidth
      open={props.isOpened}
      setIsOpened={props.setIsOpened}
      toggleIconStyles={{
        backgroundColor: props.isOpened
          ? "white"
          : selectedTheme.primaryIconBackgroundColor,
      }}
      headerOptions={
        <React.Fragment>
          <SelectedItemsContainer>
            {props.filters.map((item) => (
              <SelectedItem key={item.city} onClick={() => handleDelete(item)}>
                {
                  data.find(
                    (p) => p?.city?.toString() === item?.city?.toString()
                  )?.city
                }
                <Close style={{ position: "relative", top: "3px" }} />
              </SelectedItem>
            ))}
          </SelectedItemsContainer>
          <SearchField
            placeholder={props.searchPlaceholder}
            value={props.toSearch}
            onChange={(event) => props.setToSearch(event.target.value)}
          />
        </React.Fragment>
      }
    >
      {props.children}
    </DropdownList>
  );
};

CheckboxDropdownList.propTypes = {
  children: PropTypes.node,
  title: PropTypes.string,
  filters: PropTypes.any,
  icon: PropTypes.node,
  setToSearch: PropTypes.func,
  setItemsSelected: PropTypes.func,
  data: PropTypes.any,
  searchPlaceholder: PropTypes.string,
  toSearch: PropTypes.string,
  isOpened: PropTypes.bool,
  setIsOpened: PropTypes.func,
};

export default CheckboxDropdownList;
