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

interface IStylesProps {
  font?: string;
  disabled?: boolean;
  width?: string;
  height?: string;
  placeholderColor?: boolean;
  hasError?: boolean;
  readOnly?: boolean;
  styles?: CSSObject;
}

interface ISelectPropsOptions {
  zIndex: number;
}

export const Value = styled.div`
  ${({ styles }) => styles};
  border-radius: 8px;
  color: ${({ disabled, placeholderColor}: IStylesProps) => 
    disabled || placeholderColor? theme.neutral500 :theme.neutral700};
  cursor: ${({ disabled }: IStylesProps) => disabled && 'default'};
  font-family: ${({ font }: IStylesProps) => font};
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background-color: ${({ disabled, readOnly }: IStylesProps) => disabled?  theme.neutral300 : readOnly? theme.transparent : theme.neutral100};
`;

export const Options = styled.div`
  z-index: ${({ zIndex }: ISelectPropsOptions) => zIndex};
  background: white;
  border-radius: 8px;
  box-shadow: 0px 4px 16px rgba(116, 134, 141, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
`;

export const Option = styled.div`
  padding: 0 16px 16px;
  &:first-child {
    padding-top: 16px;
  }
  label {
    cursor: pointer;
    transition: all ease .2s;
  }
  &:hover {
    label {
      color: ${theme.neutral700};
    }
  }
`;


export const Select = styled.div`
  ${({ styles }) => styles};
  cursor: ${({ disabled }: IStylesProps) => !disabled && 'pointer'};
  position: relative;
  width: ${({ width }: IStylesProps) => width};
  height: ${({ height }: IStylesProps) => height};
  border: 1px solid;
  border-color:${({ disabled, hasError, readOnly, placeholderColor }: IStylesProps) => 
    disabled ? theme.neutral300 : (hasError ? theme.secondary400 : (readOnly? theme.transparent : placeholderColor? theme.neutral500 :theme.neutral400))};
  border-radius: 8px;
`;