import styled from 'styled-components';
import CSS from 'csstype';
import {
  BaseContainer as CommonContainer,
  Button as CommonButton,
  Text as CommonText,
  AnimatedDropdown as CommonAnimatedDropdown,
  theme,
} from '@veeqo/ui';

import CommonGlyph from 'components/common/Glyph';
import { Pill as CommonPill } from './Success/Dark/styled';

const Notification = styled(CommonContainer)`
  display: flex;
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 24px;
  z-index: 40;
  pointer-events: none;

  &.notification-enter {
    opacity: 0;
    transform: translateY(-16px);
  }

  &.notification-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: 350ms ease;
  }

  &.notification-exit {
    opacity: 0;
    transform: translateY(16px);
    transition: 350ms ease;
  }
`;

const Container = styled(CommonContainer) <CSS.StandardProperties>`
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: 20px 24px 24px 24px;
  border-radius: 4px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: ${theme.shadows.lg};
  min-width: ${(props) => `${props.minWidth}px`};
  pointer-events: auto;
`;

const Pill = styled(CommonPill) <CSS.StandardProperties>`
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: ${theme.shadows.lg};
  min-width: ${(props) => `${props.minWidth}px`};
  pointer-events: auto;
`;

const Button = styled(CommonButton) <CSS.StandardProperties>`
  margin-right: ${(props) => (props.marginRight ? `${props.marginRight}px` : '')};
`;

const Hint = styled(CommonText)`
  line-height: 20px;
`;

const Text = styled(CommonText) <CSS.StandardProperties>`
  margin: ${(props) => (props.margin ? props.margin : '')};
  color: ${(props) => props.color};
`;

const Bold = styled(CommonText) <CSS.StandardProperties>`
  margin-right: 8px;
  color: ${(props) => props.color};
`;

const Glyph = styled(CommonGlyph) <CSS.StandardProperties>`
  margin: ${(props) => (props.margin ? props.margin : '')};
`;

const Wrap = styled(CommonContainer)`
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  flex-grow: 2;
  margin-left: 24px;
  margin-right: 24px;
`;

const Icon = styled(CommonGlyph) <CSS.StandardProperties>`
  cursor: pointer;
  margin: ${(props) => (props.margin ? props.margin : '')};
  transform: ${(props) => (props.transform ? props.transform : '')};
`;

const Dropdown = styled(CommonAnimatedDropdown)``;

const Item = styled(CommonContainer)`
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 12px 16px;
  cursor: pointer;

  & > ${Text} {
    white-space: nowrap;
    user-select: none;
  }

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

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

export {
  Pill, Button, Text, Hint, Bold, Icon, Wrap, Notification, Glyph, Container, Dropdown, Item,
};