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 IStylesPropsOptions{
  selectHeight: string; 
}

export const Value = styled.div`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  color: ${({ disabled, placeholderColor}: IStylesProps) => 
    disabled || placeholderColor? theme.neutral500 :theme.neutral700};
`;

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

  padding: 16px;
`;

export const Option = styled.div`
  display: flex;
  align-items: center;
  height: 40px;
  border-radius: 8px;
  padding-left: 40px;
  label {
    cursor: pointer;
    transition: all ease .2s;
  }
  &:hover {
    background-color: ${theme.neutral200};
  }
`;

export const SelectContainer = styled.div`
  border-radius: 8px;
  cursor: ${({ disabled }: IStylesProps) => disabled && 'default'};
  background-color: ${({ disabled, readOnly }: IStylesProps) => disabled?  theme.neutral300 : readOnly? theme.transparent : theme.neutral100};
  //box
  display: flex;
  align-items: center; 
  justify-content: space-between;
  flex-direction: row;
  height: 100%;
  padding: 0 16px;
`;

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;
`;

export const AllScreen = styled.div`
  position: fixed;
  z-index: 98;
  color: ${theme.neutral100};
  background-color: ${theme.transparent};
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
`;