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

import { getBreakpointValue } from '../../utils/responsiveBreakpoints';

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

const Wrapper = styled.div`
  display: flex;
  margin: 0;
  padding: ${({ theme }) => theme.space.steps.padding};
`;

const StepWrapper = styled.div<{ themeNumberOfSteps: number }>`
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 0;
  padding: 0;

  width: ${(props): number => 100 / props.themeNumberOfSteps}%;
  max-width: ${({ theme }) => theme.sizes.steps.maxWidthMobile};
  @media (min-width: ${getBreakpointValue('sm')}px) {
    max-width: ${({ theme }) => theme.sizes.steps.maxWidthDesktop};
  }
`;

const StepIconWrapper = styled.div<{ themeClickable: boolean }>`
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0;
  padding: 0;

  ${({ themeClickable }) => {
    switch (themeClickable) {
      case true:
        return css`
          pointer-events: pointer;
        `;
      case false:
        return css`
          pointer-events: initial;
        `;
    }
  }};

  width: ${({ theme }) => theme.sizes.steps.iconSize};
  height: ${({ theme }) => theme.sizes.steps.iconSize};

  & > ${StyledIcon} {
    border-radius: 50%;
    background-color: ${({ theme }) => theme.colors.steps.completeBg};
    color: ${({ theme }) => theme.colors.steps.labelCompleteText};
  }
`;

const StepLine = styled.div<{ themeStatus: 'complete' | 'incomplete' }>`
  position: absolute;
  height: ${({ theme }) => theme.sizes.steps.lineHeight};
  margin: 0;
  padding: 0;

  top: ${({ theme }) => theme.space.steps.linePositionTop};
  left: ${({ theme }) => theme.space.steps.linePositionLeft};
  right: ${({ theme }) => theme.space.steps.linePositionRight};

  ${({ themeStatus, theme }) => {
    switch (themeStatus) {
      case 'complete':
        return css`
          background-color: ${theme.colors.steps.lineCompleteBg};
        `;
      case 'incomplete':
        return css`
          background-color: ${theme.colors.steps.lineIncompleteBg};
        `;
    }
  }};
`;

const ActiveIcon = styled.div<{
  themeStatus: 'complete' | 'incomplete';
}>`
  z-index: 1;
  position: absolute;
  box-sizing: content-box;

  display: flex;
  align-items: center;
  justify-content: center;

  width: ${({ theme }) => theme.sizes.steps.activeIconSize};
  height: ${({ theme }) => theme.sizes.steps.activeIconSize};

  border: ${({ theme }) => theme.borderWidths.steps.activeIcon} solid
    ${({ theme }) => theme.colors.steps.activeIconBorder};
  border-radius: ${({ theme }) => theme.radii.steps.icon};
  color: ${({ theme }) => theme.colors.steps.activeIconBorder};

  margin: 0;
  padding: 0;

  ${({ themeStatus, theme }) => {
    switch (themeStatus) {
      case 'complete':
        return css`
          background-color: ${theme.colors.steps.activeCompleteBg};
          font-size: ${theme.fontSizes.steps.activeIcon};
        `;

      case 'incomplete':
        return css`
          background-color: ${theme.colors.steps.activeIncompleteBg};
        `;
    }
  }};
`;

const IncompleteIcon = styled.div`
  box-sizing: border-box;

  width: ${({ theme }) => theme.sizes.steps.iconSize};
  height: ${({ theme }) => theme.sizes.steps.iconSize};

  border: ${({ theme }) => theme.borderWidths.steps.incompleteIcon} solid
    ${({ theme }) => theme.colors.steps.incompleteIconBorder};
  border-radius: ${({ theme }) => theme.radii.steps.icon};

  margin: 0;
  padding: 0;
`;

const StepLabel = styled.div<{
  themeActive: boolean;
  themeClickable: boolean;
  themeStatus: 'complete' | 'incomplete';
}>`
  text-align: center;
  margin: ${({ theme }) => theme.space.steps.labelMargin};
  padding: 0;

  ${({ themeClickable }) => {
    switch (themeClickable) {
      case true:
        return css`
          pointer-events: pointer;
        `;
      case false:
        return css`
          pointer-events: initial;
        `;
    }
  }};

  @media (max-width: ${getBreakpointValue('sm')}px) {
    display: none;
  }

  ${({ themeStatus, theme }) => {
    switch (themeStatus) {
      case 'complete':
        return css`
          color: ${theme.colors.steps.labelCompleteText};
        `;
      case 'incomplete':
        return css`
          color: ${theme.colors.steps.labelIncompleteText};
        `;
    }
  }};

  ${({ themeActive, theme }) => {
    switch (themeActive) {
      case true:
        return css`
          color: ${theme.colors.steps.labelActiveText};
          font-size: ${theme.fontSizes.steps.labelActive};
          font-weight: ${theme.fontWeights.steps.labelActive};
          line-height: ${theme.lineHeights.steps.labelActive};
        `;
      case false:
        return css`
          font-size: ${theme.fontSizes.steps.labelInactive};
          line-height: ${theme.lineHeights.steps.labelInactive};
        `;
    }
  }};
`;

export {
  Wrapper,
  StepWrapper,
  StepLine,
  StepLabel,
  StepIconWrapper,
  ActiveIcon,
  IncompleteIcon,
};