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

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

const SelectWrapper = 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"};
  }
`;

const StyledSelect = styled(AntdSelect)`
  width: 100%;
`;

export const Select = (props) => {
  const {
    children,
    prefixIcon,
    size,
    placeholder,
    mode,
    error,
    status,
    helperText,
    label,
    required,
    inputRef,
    ...rest
  } = props;

  return (
    <StyledContainer className="veris-select-container">
      {label && <Label className="veris-select-label" label={label} required={required} />}
      <SelectWrapper prefixIcon={prefixIcon} mode={mode}>
        {prefixIcon && <div className="prefix-icon-wrapper">{prefixIcon}</div>}
        <StyledSelect
          size={size}
          getPopupContainer={(trigger) => trigger.parentNode}
          suffixIcon={
            <img
              src={downArrow}
              alt=""
              style={{
                height: 12,
                width: 12,
              }}
            />
          }
          ref={inputRef}
          placeholder={placeholder}
          mode={mode}
          status={status ? status : error ? "error" : ""}
          maxTagCount="responsive"
          {...rest}
        >
          {children}
        </StyledSelect>
      </SelectWrapper>

      {helperText && <HelperText error={error || status === "error"}>{helperText}</HelperText>}
    </StyledContainer>
  );
};