import React from "react";
import { TreeSelect as AntdTreeSelect } from "antd";
import downArrow from "../../assets/icons/arrow-down-1.svg";
import Label from "../Label/Label";
import HelperText from "../HelperText/HelperText";
import styled from "styled-components";

const StyledContainer = styled.div`
  width: 100%;
`;

const TreeWrapper = styled.div`
  position: relative;
  width: 100%;

  .prefix-icon-wrapper {
    position: absolute;
    z-index: 1;
    width: 3rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  && .ant-select .ant-select-selector {
    padding-left: ${(props) => (props.prefixIcon ? "calc(3rem - 8px)" : "auto")};
  }
  && .ant-select-selection-placeholder {
    padding-left: ${(props) =>
      props.prefixIcon && ["multiple", "tags"].includes(props.mode) ? "calc(3rem - 16px)" : "auto"};
  }

  && .ant-select-tree .ant-select-tree-switcher {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
`;

const StyledTreeSelect = styled(AntdTreeSelect)`
  width: 100%;
`;

const TreeSelect = (props) => {
  const { label, error, required, children, status, helperText, inputRef, prefixIcon, multiple, mode, ...rest } = props;

  return (
    <StyledContainer className="veris-tree-select-container">
      {label && <Label className="veris-tree-select-label" label={label} required={required} />}

      <TreeWrapper prefixIcon={prefixIcon} mode={multiple ? "multiple" : mode ? mode : ""}>
        {prefixIcon && <div className="prefix-icon-wrapper">{prefixIcon}</div>}
        <StyledTreeSelect
          getPopupContainer={(trigger) => trigger.parentNode}
          showSearch
          suffixIcon={
            <img
              src={downArrow}
              alt=""
              style={{
                height: 12,
                width: 12,
              }}
            />
          }
          multiple={multiple}
          dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
          status={status ? status : error ? "error" : ""}
          maxTagCount="responsive"
          ref={inputRef}
          {...rest}
        >
          {children}
        </StyledTreeSelect>
      </TreeWrapper>
      {/* [Error message] */}
      {helperText && <HelperText error={error || status === "error"}>{helperText}</HelperText>}
    </StyledContainer>
  );
};

export default TreeSelect;