import styled, { css } from 'styled-components';
import roundedButton from 'Components/utils/styles/roundedButton';
import {
  grayColor,
  whiteColor,
  secondaryColor,
} from 'Themes/utils/colorPickers';
import { textSize } from 'Themes/utils/fontPickers';
import { screenSize } from 'Themes/utils/mediaQueries';

const wrapperWidth = ({ small }) =>
  small
    ? css`
        width: 84vw;

        @media ${screenSize('desktop')} {
          width: 140px;
        }
      `
    : css`
        width: 84vw;

        @media ${screenSize('desktop')} {
          width: 166px;
        }
      `;

const optionsWidth = ({ small }) =>
  small
    ? css`
        width: 84vw;

        @media ${screenSize('desktop')} {
          width: 122px;
        }
      `
    : css`
        width: 84vw;

        @media ${screenSize('desktop')} {
          width: 166px;
        }
      `;

const buttonColors = ({ isOpen }) => {
  if (isOpen) {
    return css`
      background-color: ${grayColor[0.2]};
      border-bottom-color: ${grayColor[0.2]};
    `;
  }

  return css`
    background-color: ${whiteColor};
  `;
};

const borderRadius = ({ isOpen }) => isOpen && 0;

const optionsTextSize = ({ small }) =>
  small
    ? css`
        font-size: ${textSize('S')};
      `
    : css`
        font-size: ${textSize('S')};
      `;

const optionSize = ({ small }) =>
  small
    ? css`
        min-height: 30px;
        line-height: 1.33;
        padding: 0 16px;
      `
    : css`
        min-height: 30px;
        line-height: 1.33;
        padding: 0 16px;
      `;

export const Wrapper = styled.div`
  position: relative;
  z-index: 1;
  ${wrapperWidth}
`;

export const SelectorButton = styled.button`
  ${roundedButton}
  ${buttonColors}
  position: relative;
  border-bottom-left-radius: ${borderRadius};
  border-bottom-right-radius: ${borderRadius};
  padding-right: 36px;

  :hover {
    border-color: ${grayColor[0.2]};
  }
`;

const Arrow = styled.span`
  position: absolute;
  right: 14px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
`;

export const ArrowUp = styled(Arrow)`
  top: calc(50% - 6px);
  border-bottom: 4px solid ${grayColor};
`;
export const ArrowDown = styled(Arrow)`
  bottom: calc(50% - 6px);
  border-top: 4px solid ${grayColor};
`;

export const Options = styled.div`
  position: absolute;
  display: flex;
  flex-direction: column;
  ${optionsWidth}
  border: 1px solid ${grayColor[0.4]};
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background-color: ${whiteColor};
  padding: 8px;
  ${optionsTextSize}
`;

export const Option = styled.span`
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
  border-radius: 4px;
  ${optionSize}

  :hover {
    background-color: ${secondaryColor[0.2]};
    color: ${secondaryColor};
  }

  @media ${screenSize('desktop')} {
    justify-content: start;
  }
`;
