import styled, { CSSObject } from "styled-components";
import { theme } from "data/dataMx";

interface IStylesProps {
  disabled: boolean;
  readOnly?: boolean;
  hasError?: boolean;
  actualValue?: boolean;
  backGround?: string;
  minWidth?: string;
  styles?: CSSObject;
}

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

export const ContainerInput = styled.div`
  position: relative;
  width: 100%;
  min-width: ${({ minWidth }: IStylesProps) => minWidth};
`;

export const ContainerIconFlag = styled.div`
  position: absolute;
  left: 10px;
  top: 12px;
`;

export const Value = styled.input`
  ${({ styles }) => styles}
  height: 48px;
  border: 1px solid ;
  border-color:${({ readOnly, disabled, hasError }: IStylesProps) =>
    disabled === true
      ? theme.neutral300
      : readOnly === true
      ? theme.transparent
      : hasError
      ? theme.secondary400
      : theme.neutral400};
  box-sizing: border-box;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 14px;
  background-color: ${({ disabled }: IStylesProps) =>
    disabled === true ? theme.neutral300 : theme.neutral100};
  color:${({ disabled }: IStylesProps) =>
    disabled === true ? theme.neutral600 : theme.neutral700};
  width: 100%;

  &:focus {
    border: ${({ disabled }: IStylesProps) =>
      disabled ? "none" : `1px solid ${theme.neutral700}`};
    outline: none;
  }

  &:active {
    border: ${({ disabled }: IStylesProps) =>
      disabled ? "none" : `1px solid ${theme.neutral700}`};
    outline: none;
  }

  &::placeholder{
    color: ${({ actualValue }: IStylesProps) =>
      actualValue ? theme.neutral700 : theme.neutral500};
    padding-left: ${({ actualValue }: IStylesProps) =>
      actualValue ? "27px" : "0"};
  }
`;

export const ContainerIcon = styled.div`
  position: absolute;
  right: 15px;
  top: 16px;
`;

export const Option = styled.ul`
  background-color: ${theme.neutral100};
  padding: 16px;
  box-shadow: 0px 4px 16px rgba(116, 134, 141, 0.2);
  min-width: 200px;
  position: absolute;
  margin: 0;
  top:56px;
  left: 0;
  right: 0px;
  max-height: 200px;
  overflow-y: scroll;
  z-index: 2;
`;

export const ItemContainer = styled.li`
  display: flex;
  align-items: center;
  height: 40px;
  background-color: ${({ backGround }: IStylesProps) => backGround};
  border-radius: 8px;

  &:hover {
    label{
      color: ${theme.neutral700};
    }
  }

  svg {
    min-width:24px
  }
`;

export const ContainerIconOptions = styled.div`
  min-width: 24px;
`;

export const ContainerText = styled.div`
  margin-left: 8px;
`;
