import styled, { css } from 'styled-components';

import { StyledIcon } from '../Icon/StyledIcon';

export const CarouselContainer = styled.div`
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
`;

export const StyledButtonWrapper = styled.ul<{
  themeDotDirection: 'row' | 'column';
  themeDotPlacement: 'top' | 'right' | 'bottom' | 'left';
}>`
  position: absolute;
  z-index: 15;
  display: flex !important;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;

  ${({ themeDotDirection }) => {
    switch (themeDotDirection) {
      case 'row':
        return css`
          flex-direction: row;
        `;
      case 'column':
        return css`
          flex-direction: column;
          transform: translateY(-50%);
        `;
    }
  }};

  ${({ themeDotPlacement, theme }) => {
    switch (themeDotPlacement) {
      case 'top':
        return css`
          bottom: auto;
          top: ${theme.space.carousel.default};
          right: 0;
          left: 0;
        `;
      case 'right':
        return css`
          top: 50%;
          bottom: auto;
          left: auto;
          right: ${theme.space.carousel.default};
        `;
      case 'bottom':
        return css`
          top: auto;
          bottom: ${theme.space.carousel.default};
          right: 0;
          left: 0;
        `;
      case 'left':
        return css`
          top: 50%;
          bottom: auto;
          left: ${theme.space.carousel.default};
          right: auto;
        `;
    }
  }};
`;

export const StyledButtonList = styled.li<{
  themeDotState: 'activeRow' | 'defaultRow' | 'activeColumn' | 'defaultColumn';
}>`
  position: relative;
  display: inline-block;
  flex: 0 1 auto;
  box-sizing: content-box;
  padding: 0;
  text-align: center;
  vertical-align: top;
  transition: width 0.5s;

  ${({ themeDotState, theme }) => {
    switch (themeDotState) {
      case 'activeRow':
        return css`
          width: ${theme.sizes.carousel.active};
          margin: ${theme.space.carousel.listRowMargin};
        `;
      case 'defaultRow':
        return css`
          width: ${theme.sizes.carousel.default};
          margin: ${theme.space.carousel.listRowMargin};
        `;
      case 'activeColumn':
        return css`
          width: ${theme.sizes.carousel.basic};
          height: ${theme.sizes.carousel.active};
          margin: ${theme.space.carousel.listColumnMargin};
        `;
      case 'defaultColumn':
        return css`
          width: ${theme.sizes.carousel.basic};
          height: ${theme.sizes.carousel.default};
          margin: ${theme.space.carousel.listColumnMargin};
        `;
    }
  }};
`;

export const StyledButton = styled.button<{
  active: boolean;
  themeDotDirection: 'row' | 'column';
  themeVariant: 'light' | 'dark';
}>`
  display: block;
  padding: 0;
  margin: 0;
  outline: none;
  cursor: pointer;
  border: 0;
  border-radius: ${({ theme }) => theme.radii.carousel.default};
  opacity: ${(props: { active: boolean }): number => (props.active ? 1 : 0.2)};

  ${({ themeDotDirection, theme }) => {
    switch (themeDotDirection) {
      case 'row':
        return css`
          height: ${theme.sizes.carousel.basic};
          width: 100%;
        `;
      case 'column':
        return css`
          height: 100%;
          width: ${theme.sizes.carousel.basic};
        `;
    }
  }};

  ${({ themeVariant, theme }) => {
    switch (themeVariant) {
      case 'light':
        return css`
          background: ${theme.colors.carousel.light};
        `;
      case 'dark':
        return css`
          background: ${theme.colors.carousel.dark};
        `;
    }
  }};
`;

export const CarouselSingleSlide = styled.div`
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
`;

export const CarouselSlideCollection = styled.div<{
  currentSlide: number;
  themeDotDirection: 'row' | 'column';
}>`
  display: flex;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;

  ${({ themeDotDirection }) => {
    switch (themeDotDirection) {
      case 'row':
        return css`
          flex-direction: row;
          ${(props: { currentSlide: number }): string =>
            `transform:translateX(-${props.currentSlide * 100}%)`};
        `;
      case 'column':
        return css`
          flex-direction: column;
          ${(props: { currentSlide: number }): string =>
            `transform:translateY(-${props.currentSlide * 100}%)`};
        `;
    }
  }};
`;

export const StyledButtonIconWrapper = styled.div<{
  themeButtonPlacement: 'middleRow' | 'leftColumn' | 'rightColumn';
  themeVariant: 'light' | 'dark';
}>`
  position: absolute;
  z-index: 15;
  display: flex !important;
  justify-content: center;
  padding: 0;
  justify-content: space-between;

  ${({ themeButtonPlacement, theme }) => {
    switch (themeButtonPlacement) {
      case 'middleRow':
        return css`
          flex-direction: row;
          transform: translate(0, -50%);
          width: 90%;
          margin: 0 auto;
          top: 50%;
          left: 0;
          right: 0;
        `;
      case 'rightColumn':
        return css`
          flex-direction: column;
          height: 90%;
          margin: auto 0;
          right: ${theme.space.carousel.navigationButtonColumnMargin};
          top: 0;
          bottom: 0;
        `;
      case 'leftColumn':
        return css`
          flex-direction: column;
          height: 90%;
          margin: auto 0;
          left: ${theme.space.carousel.navigationButtonColumnMargin};
          top: 0;
          bottom: 0;
        `;
    }
  }};
  & ${StyledIcon} {
    font-size: ${({ theme }) => theme.fontSizes.carousel.navigationButton};

    ${({ themeVariant, theme }) => {
      switch (themeVariant) {
        case 'light':
          return css`
            color: ${theme.colors.carousel.light};
          `;
        case 'dark':
          return css`
            color: ${theme.colors.carousel.dark};
          `;
      }
    }};
  }
`;