import styled from 'styled-components';
import {
  media,
  REM_UNIT_XSM,
  REM_UNIT_SM,
  REM_UNIT_MD,
  REM_UNIT_LG,
  FONT_BOLD,
  // STYLE_DROPDOWN_LABEL_BG,
  STYLE_DROPDOWN_LABEL_COLOR_HOVER,
  STYLE_DROPDOWN_LABEL_FILL_HOVER,
  // STYLE_DROPDOWN_MENU_BG,
  // STYLE_DROPDOWN_BOX_SHADOW,
  STYLE_DROPDOWN_COLOR,
  STYLE_DROPDOWN_COLOR_ACTIVE,
  STYLE_DROPDOWN_COLOR_HOVER,
  STYLE_DROPDOWN_COLOR_DISABLED,
  STYLE_DROPDOWN_FILL,
  STYLE_DROPDOWN_FILL_ACTIVE,
  STYLE_DROPDOWN_FILL_HOVER,
  SONIC_SILVER,
  GRAY_X11,
  SUNSET_ORANGE,
  VERY_LIGHT_TANGELO,
} from '@vincent_za/styles';
import scrollHOC from '../Scroll/component';
import { SpinnerLoader } from '../Loader';
import { ErrorFloat } from '../Error';
import Svg from '../Svg/component';

export const DropdownWrap = styled.div`
  z-index: ${props => props.isOpen ? 3 : 'auto'};
  display: ${props => props.isHidden ? 'none' : 'flex'};
  position: relative;
  flex-grow: ${props => props.isHeaderStretchWidth ? 1 : 0};
  appearance: none !important;
  outline: none;
  ${props => props.isOpen && 'background: #ECF0E8'};
  ${props => props.isDisabled && 'opacity: 0.5'};

  &:hover {
    ${props => !props.isClick && !props.isDisabled && !props.isError && `
      z-index: 3;
      background: #ECF0E8;
    `};
  };
`;

export const HeaderWrap = styled.div`
  display: flex;
  padding: ${props => props.isFormVariant ? `${REM_UNIT_SM} ${REM_UNIT_LG}` : `${REM_UNIT_MD} ${REM_UNIT_LG}`};
  padding-bottom: ${REM_UNIT_SM};
  flex-grow: ${props => props.isHeaderStretchWidth ? 1 : 0};
  align-items: center;
  cursor: ${props => props.isBusy ? 'progress' : (props.isDisabled || props.isError) ? 'not-allowed' : 'default'};
  fill: ${SONIC_SILVER};
  white-space: nowrap;

  ${media.sm`
    padding-bottom: ${REM_UNIT_MD};
  `};
`;

export const HeaderInnerWrap = styled.div`
  position: relative;
  display: flex;
  flex-grow: 1;
  align-items: center;
  ${props => props.isFormVariant && `
    height: 32px;
    box-shadow: 0 1px 0 ${props.isOpen ? '#dfe4db' : '#ECF0E8'};
  `};

  ${props => props.isFormVariant && props.hasActiveItem && `
    padding: ${REM_UNIT_MD} 0 ${REM_UNIT_XSM};
    color: ${GRAY_X11};
  `};

  ${props => props.isError && `
    ${props.isFormVariant && `box-shadow: 0 1px 0 ${SUNSET_ORANGE}`};
    color: ${SUNSET_ORANGE};
  `};

  ${props => props.isInfo && `
    ${props.isFormVariant && `box-shadow: 0 1px 0 ${VERY_LIGHT_TANGELO}`};
    color: ${VERY_LIGHT_TANGELO};
  `};  
`;

export const Label = styled.div`
  display: ${props => props.isHidden ? 'none' : 'block'};

  ${props => props.isOpen && !props.isDisabled && !props.isInfo && !props.isError && `
    color: ${STYLE_DROPDOWN_LABEL_COLOR_HOVER};
  `};

  ${props => (props.isError || props.isDisabled) && !props.isInfo &&`
    margin-right: ${REM_UNIT_MD};
  `};

  ${DropdownWrap}:hover & {
    ${props => !props.isClick && !props.isDisabled && !props.isInfo && !props.isError && `
      color: ${STYLE_DROPDOWN_LABEL_COLOR_HOVER};
    `};
  };
`;

export const LabelSvg = styled(Svg)`
  display: flex;
  fill: ${props => props.isOpen ? STYLE_DROPDOWN_LABEL_FILL_HOVER : SONIC_SILVER};

  &:hover {
    fill: ${STYLE_DROPDOWN_LABEL_FILL_HOVER};
  };
`;

export const ChevronDownSvg = styled(Svg)`
  display: ${props => !props.isHidden ? 'flex' : 'none'};
  margin-left: auto;
  padding-left: ${REM_UNIT_SM};
  flex-shrink: 0;
  width: 0.9rem;
  height: 0.9rem;
  box-sizing: content-box;

  svg {
    fill: #ADCCC8;
  };

  ${DropdownWrap}:hover & {
    svg {
      ${props => !props.isClick && 'fill: #ADCCC8'};
    };
  };
`;

export const LoaderStyled = styled(SpinnerLoader)`
  margin: -0.6rem 0 -0.6rem auto;
  padding-left: 0.6rem;
  height: ${REM_UNIT_LG};
`;

export const ErrorFloatStyled = styled(ErrorFloat)`
  position: relative;
  margin-left: auto;
`;

export const Menu = styled.div`
  display: ${props => props.isOpen ? 'flex' : 'none'};
  flex-direction: column;
  z-index: 2;
  position: fixed;
  top: ${props => props.clientRect.top + props.clientRect.height}px;
  ${props => props.isTop && `top: ${props.clientRect.top}px;`};
  ${props => props.isBottom && `
    top: auto;
    bottom: ${props.clientRect.bottom - props.clientRect.height}px;
  `};
  ${props => props.isInWidget && `
    top: auto;
    margin-top: ${props.clientRect.height}px;
  `};
  right: auto;
  left: ${props => props.isRight ? (`${props.clientRect.right}px`) : 'auto'};
  padding: ${REM_UNIT_MD} ${REM_UNIT_LG};
  padding-top: ${REM_UNIT_SM};
  width: auto;
  ${props => props.isMenuHeaderWidth && `width: ${props.clientRect.width}px;`};
  ${props => props.isMenuHeaderWidthMin && `min-width: ${props.clientRect.width}px;`};
  max-height: ${props => props.isNoMaxHeight ? 'none' : '20rem'};
  ${props => props.isMenuCutOff && `
    max-height: ${`calc(100vh - ${props.clientRect.top + props.clientRect.height}px)`} !important;
  `};
  color: #abb1a7;
  background: #ECF0E8;
  box-shadow: 0 4px 11px -6px #ababab;
  transform: ${props => props.isRight ? 'translateX(-100%)' : 'none'};

  ${DropdownWrap}:hover & {
    ${props => !props.isClick && !props.isDisabled && !props.isInfo && !props.isError && 'display: flex'};
  };
`;

export const MenuScroll = scrollHOC(Menu);

export const ListWrap = styled.ul``;

export const Item = styled.li`
  display: flex;
  align-items: center;
  margin-top: ${REM_UNIT_MD};
  text-align: left;
  cursor: pointer;
  white-space: nowrap;

  &:hover {
    color: ${props => props.isActive ? STYLE_DROPDOWN_COLOR_ACTIVE : STYLE_DROPDOWN_COLOR_HOVER};
  };
  
  &:first-child {
    margin-top: 0;
  };

  ${props => props.isActive && `
    color: ${STYLE_DROPDOWN_COLOR_ACTIVE};
    font-family: ${FONT_BOLD};
  `};

  ${props => props.isDisabled && `
    pointer-events: none;
    color: ${STYLE_DROPDOWN_COLOR_DISABLED};
  `};
`;

export const ItemSvg = styled(Svg)`
  margin-right: ${REM_UNIT_MD};
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  
  svg {
    fill: ${props => props.isActive ? STYLE_DROPDOWN_FILL_ACTIVE : STYLE_DROPDOWN_FILL};

    ${Item}:hover & {
      fill: ${props => props.isActive ? STYLE_DROPDOWN_FILL_ACTIVE : STYLE_DROPDOWN_FILL_HOVER};
    };
  };
`;

export const ItemWithActiveAndSelected = styled.li`
  display: flex;
  align-items: center;
  margin-top: ${REM_UNIT_XSM};
  padding: ${REM_UNIT_XSM} ${REM_UNIT_LG};
  cursor: pointer;
  color: ${props => props.isSelected ? STYLE_DROPDOWN_COLOR_ACTIVE : STYLE_DROPDOWN_COLOR};
  box-shadow: ${props => props.isActive ? `inset 1px 0 0 0 ${STYLE_DROPDOWN_COLOR_ACTIVE}` : 'none'};
  white-space: nowrap;

  &:hover {
    color: ${props => props.isActive || props.isSelected ? STYLE_DROPDOWN_COLOR_ACTIVE : STYLE_DROPDOWN_COLOR_HOVER};

    ${ItemSvg} {
      svg {
        fill: ${props => props.isActive || props.isSelected ? STYLE_DROPDOWN_FILL_ACTIVE : STYLE_DROPDOWN_FILL_HOVER};
      };
    };
  };

  &:first-child {
    margin-top: 0;
  };
`;
