import styled, { css } from 'styled-components';
import { getFieldPadding } from '../utils.js';
import { convertToTransientProps, getColorAlias, getFontSize, getDefaultTransition, getSpacing, getDarkenColor } from '../../../utils/index.js';
import { fadeIn } from '../../../utils/styles.js';
import { Prefix } from '../textField/styles.js';

const SelectInput = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['hasText']),
}) `
  display: flex;
  flex-direction: row;
  justify-content: ${(props) => (props.hasText ? 'space-between' : 'flex-end')};
  width: 100%;
  color: ${(props) => getColorAlias(props.disabled ? 'contentDisabled' : 'contentDefault')};
  background: ${(props) => props.disabled ? getColorAlias('disabled01') : 'transparent'};
  ${getFontSize('size16')};
  ${(props) => getFieldPadding(props.variant)};
  border: unset;
  outline: unset;
  border-radius: ${(props) => props.theme.radius.roundedC};
  width: 100%;
  ${getDefaultTransition('background')};
  align-items: center;

  &:hover {
    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
  }

  &:focus:hover {
    background: ${(props) => props.disabled
    ? getColorAlias('disabled01')
    : getColorAlias('containerDefault')};
  }

  input {
    left: 0;
    width: 100%;
    bottom: 0;
    opacity: 0;
    position: absolute;
    pointer-events: none;
  }

  span {
    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
    flex-wrap: wrap;
    gap: ${getSpacing('s01')};
  }

  > svg {
    fill: ${(props) => props.disabled
    ? getColorAlias('disabled01')
    : getColorAlias('contentDefault')};
  }
`;
const OptionsPopper = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['maxHeight']),
}) `
  max-height: ${(props) => `${props.maxHeight}px`};
  z-index: 999;
  overflow-y: auto;
  overflow-x: hidden;
  background: ${getColorAlias('containerDefault')};
  font-family: ${(props) => props.theme.font.familyPrimary};
  border-radius: ${(props) => props.theme.radius.roundedC};
  padding: ${getSpacing('s02', 's00')};
  width: ${(props) => `${props.width}px`};
  box-shadow: ${(props) => props.theme.elevation.e3};
  ${(props) => css `
      animation: ${fadeIn} ${props.theme.motion.speed.defaultM}
        ${props.theme.motion.easing.easeDefault};
    `};

  &:active,
  &:focus,
  &:enabled {
    outline: none;
  }
`;
const OptionItemLabel = styled.div `
  ${(props) => props.isMultivalue &&
    css `
      margin-left: ${getSpacing('s04')};
    `};
`;
const OptionItem = styled.span.withConfig({
    shouldForwardProp: convertToTransientProps([
        'isSelected',
        'isMultivalue',
    ]),
}) `
  display: flex;
  ${(props) => props.isMultivalue
    ? css `
          align-items: center;
          justify-content: flex-start;
        `
    : css `
          align-items: center;
          justify-content: space-between;
        `};

  padding: ${getSpacing('s03', 's04')};
  color: ${(props) => props.isDisabled
    ? getColorAlias('contentDisabled')
    : getColorAlias('contentDefault')};
  font-weight: ${(props) => props.isSelected
    ? props.theme.font.weightExtrabold
    : props.theme.font.weightRegular};
  font-family: ${(props) => props.theme.font.familyPrimary};
  outline: none;
  border: 2px solid transparent;
  border-radius: ${(props) => props.theme.radius.roundedA};
  cursor: pointer;
  ${getFontSize('size16')};
  ${getDefaultTransition()};

  background: ${(props) => getColorAlias(props.isHovered ? 'disabled01' : 'containerDefault')};

  &:hover {
    background: ${getDarkenColor('hover02', 'containerDefault')};
  }

  &:focus-visible {
    border-color: ${getColorAlias('focusOuter')};
  }
`;
const DropdownPrefix = styled(Prefix) `
  ${(props) => props.hasValue
    ? css `
          padding-left: ${getSpacing('s04')};
        `
    : css `
          padding: ${getSpacing('s00', 's04')};
        `};
`;

export { DropdownPrefix, OptionItem, OptionItemLabel, OptionsPopper, SelectInput };
