import styled from 'styled-components';

import {
  theme,
  BaseContainer as CommonContainer,
  Text as CommonText,
  AnimatedDropdown as CommonAnimatedDropdown,
} from '@veeqo/ui';
import CommonGlyph from 'components/common/Glyph';

export const getOptionsDropdownWidth = (isFixed: boolean, isDefault: boolean) => {
  if (isFixed) return 260;
  if (!isDefault) return 128;
  return 81;
};

const Dropdown = styled(CommonAnimatedDropdown)``;

const Text = styled(CommonText)``;

const Glyph = styled(CommonGlyph)``;

const Container = styled(CommonContainer)`
  width: 100%;
  white-space: nowrap;
  border-bottom: 1px solid #dfe3e8;

  & > ${Glyph} {
    color: ${theme.colors.secondary.blue.base} !important;
    position: absolute;
    top: 7px;
    left: 8px;
  }

  & > ${Text} {
    padding: 12px 16px 12px 40px;
    user-select: none;
  }
`;

type ItemPropTypes = {
  isFixed: boolean;
  isDefault: boolean;
};

const Item = styled(CommonContainer)<ItemPropTypes>`
  width: ${({ isFixed, isDefault }) => getOptionsDropdownWidth(isFixed, isDefault)}px;

  & > ${Text} {
    white-space: nowrap;
    padding: 12px 16px;
    user-select: none;
  }

  &:hover {
    background-color: ${theme.colors.neutral.grey.lightest};
    cursor: pointer;
  }

  &:hover > ${Text} {
    color: ${theme.colors.secondary.blue.base};
  }
`;

export {
  Dropdown, Text, Glyph, Container, Item,
};