import styled from 'styled-components';

import {
  theme, Text, Card, BaseContainer,
} from '@veeqo/ui';

import CommonIntegration from 'components/common/Integration';

const { colors } = theme;

export const iconOffset = 10;

const NoWrapText = styled(Text)`
  white-space: nowrap;
`;

const IconWrap = styled(BaseContainer)<{ index: number, isInteractive: boolean }>`
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  border: 1px solid ${colors.neutral.grey.light};
  background-color: ${colors.neutral.grey.light};
  border-radius: 50%;

  cursor: ${({ isInteractive }) => (isInteractive ? 'pointer' : 'default')};

  &.store-icon-enter {
    transform: translateY(0px);
  }

  &.store-icon-enter-active {
    transition: all 350ms;
    transform: translateY(-8px);
  }

  &.store-icon-enter-done {
    transition: all 350ms;
    transform: translateY(-8px);
  }

  &.store-icon-exit {
    transform: translateY(-8px);
  }

  &.store-icon-exit-active {
    transition: all 350ms;
    transform: translateY(0px);
  }
`;

const ShowMore = styled(BaseContainer)<{numIcons: number, isInteractive: boolean}>`
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  background-color: ${colors.neutral.grey.base};
  border-radius: 10px;

  cursor: ${({ isInteractive }) => (isInteractive ? 'pointer' : 'default')};

  & > ${NoWrapText} {
    position: relative;
    bottom: 1px;
  }
`;

const Integration = styled(CommonIntegration)`
  width: 20px;
  height: 20px;
`;

const InactiveCover = styled(BaseContainer)`
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
`;

const Container = styled(BaseContainer)<{ width: number }>`
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: ${(props) => (props.width ? `${props.width}px` : '')};
  line-height: 0px;

  & > :nth-child(n+2) {
    margin-left: -10px;
  }
`;

// @ts-ignore
const ItemsCard = styled(Card.Surface)`
  padding: 16px;
`;

const Item = styled(BaseContainer)`
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 8px;
  cursor: pointer;

  &:last-child {
    margin-bottom: 0;
  }

  & > ${Integration} {
    margin-right: 12px;
  }
`;

export {
  Integration,
  IconWrap,
  Container,
  ShowMore,
  NoWrapText as Text,
  ItemsCard,
  Item,
  InactiveCover,
};