import { NextOutlineMd } from '../../../icons/NextOutlineMd';
import { Button } from '../../Button';
import { styled } from '../../styled';
import { typographyClassnames } from '../../Typography/constants';
import { STEPPER_ORDER_COUNTER_NAME } from '../constants';
import { stepIconClassnames } from '../StepIcon/constants';
import { stepClassnames } from './constants';
export const Wrapper = styled.div `
  counter-increment: ${STEPPER_ORDER_COUNTER_NAME};

  display: flex;
  gap: ${({ theme }) => theme.microSpacing(5)};
  align-items: center;

  &.${stepClassnames.alternativeLabel} {
    position: relative;

    flex: 1;
    flex-direction: column;

    & .${stepClassnames.labelContainer} {
      flex-direction: column;

      text-align: center;
    }

    &:first-of-type {
      & .${stepClassnames.connector} {
        display: none;
      }
    }
  }

  &.${stepClassnames.connectorArrow} {
    & .${stepClassnames.content} {
      padding: ${({ theme }) => theme.microSpacing(5, 0)};
    }
    
    &:not(:first-of-type) .${stepClassnames.content} {
      margin-left: ${({ theme }) => theme.spacing(2)};
    }

    &:last-of-type .${stepClassnames.connector} {
      display: none;
    }
  }

  &.${stepClassnames.connectorLine} {
    &.${stepClassnames.orientationHorizontal} {
      & .${stepClassnames.content} {
        align-items: center;

        padding: ${({ theme }) => theme.spacing(0, 1)};
      }

    
      &.${stepClassnames.alternativeLabel} {
        & .${stepClassnames.content} {
          padding: ${({ theme }) => theme.microSpacing(3, 0)};
        }
      }
    }

    &.${stepClassnames.orientationVertical} {
      & .${stepClassnames.labelContainer} {
        color: ${({ theme }) => theme.palette.grey[900]};
      }

      & .${stepClassnames.label} {
        font-size: ${({ theme }) => theme.typography.body1.fontSize};
        line-height: ${({ theme }) => theme.typography.body1.lineHeight};
      }
      
      & .${stepClassnames.content} {
        padding: ${({ theme }) => theme.spacing(1, 0, 0)};
      }

      & .${stepClassnames.connector}:not(.${stepClassnames.hasDescription}) {
        margin-bottom: ${({ theme }) => theme.microSpacing(1)};
      }

      &:last-of-type {
        & .${stepClassnames.description} {
          min-height: 0;
          margin: 0;
          padding-left: ${({ theme }) => theme.spacing(6)};

          border-left: none;

          ${({ theme }) => theme.breakpoints.down('sm')} {
            padding-left: ${({ theme }) => theme.spacing(7)};
          }
        }

        & .${stepClassnames.connector} {
          display: none;
        }
      }

      &:last-of-type {
        & .${stepClassnames.content} {
          padding: ${({ theme }) => theme.spacing(1, 0)};
    
          & .${stepClassnames.description} {
            margin-bottom: 0;
          }
        }
      }

      & .${stepClassnames.labelMobile} {
        display: none;
      }

      & .${stepClassnames.label} {
        display: block;
      }
    }
  }

  & .${stepClassnames.content} {
    &.${stepClassnames.active} {
      & .${stepClassnames.label} {
        color: ${({ theme }) => theme.palette.grey[900]};
      }

      & .${stepIconClassnames.root} {
        color: ${({ theme }) => theme.palette.primary[800]};

        &.${stepIconClassnames.success} {
          color: ${({ theme }) => theme.palette.success[800]};
        }

        &.${stepIconClassnames.error} {
          color: ${({ theme }) => theme.palette.error[800]};
        }

        &.${stepIconClassnames.warning} {
          color: ${({ theme }) => theme.palette.warning[800]};
        }
      }
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    &.${stepClassnames.connectorArrow} {
      & .${stepClassnames.content} {
        padding: ${({ theme }) => theme.spacing(2, 0)};
      }
    }
  }
`;
export const IconWrapper = styled.div `
  display: flex;

  & .${stepIconClassnames.root} {
    width: 20px;
    height: 20px;

    color: ${({ theme }) => theme.palette.grey[300]};
    
    transition: ${({ theme }) => theme.transitions.create(['color'], {
    duration: theme.transitions.duration.shorter,
})};

    &.${stepIconClassnames.active} {
      color: ${({ theme }) => theme.palette.primary[800]};
    }

    &.${stepIconClassnames.success} {
      color: ${({ theme }) => theme.palette.success[800]};
    }

    &.${stepIconClassnames.error} {
      color: ${({ theme }) => theme.palette.error[800]};
    }

    &.${stepIconClassnames.warning} {
      color: ${({ theme }) => theme.palette.warning[800]};
    }

    ${({ theme }) => theme.breakpoints.down('sm')} {
      width: 24px;
      height: 24px;
    }
  }
`;
export const ArrowConnector = styled(NextOutlineMd) `
  width: 20px;
  height: 20px;

  color: ${({ theme }) => theme.palette.grey[400]};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: 24px;
    height: 24px;
  }
`;
export const LineConnector = styled.div `
  flex: 1 1 auto;

  height: 2px;

  border-top: 2px solid ${({ theme }) => theme.palette.components.border.default};

  &.${stepClassnames.alternativeLabel} {
    position: absolute;
    top: 15px;
    right: calc(50% + 14px);
    left: calc(-50% + 14px);
  }

  &.${stepClassnames.orientationVertical} {
    min-height: 16px;

    /* Смещение необходимо для центрирования линии относительно иконки, т.к. линия шириной 2px, то для выравнивания необходимо число не кратное 2ум  */
    margin-left: 9px;

    border-top: unset;
    border-left: 2px solid ${({ theme }) => theme.palette.components.border.default};

    ${({ theme }) => theme.breakpoints.down('sm')} {
      margin-left: 11px;
    }
  }
`;
export const LabelWrapper = styled.div `
  display: flex;
  gap: ${({ theme }) => theme.spacing(1)};
  align-items: center;

  color: ${({ theme }) => theme.palette.grey[700]};

  & .${typographyClassnames.root} {
    transition: ${({ theme }) => theme.transitions.create(['color'], {
    duration: theme.transitions.duration.shorter,
})};
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    white-space: nowrap;
  }
`;
export const StepContentWrapper = styled.div `
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing(1)};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    gap: ${({ theme }) => theme.microSpacing(1)};
  }
`;
export const StyledButton = styled(Button) `
  cursor: pointer;

  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing(1)};
  align-items: flex-start;
  justify-content: flex-start;

  width: 100%;
  height: auto;
  padding: 0;

  background: transparent;
  border: 0;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    gap: ${({ theme }) => theme.microSpacing(1)};

    height: auto;
  }

  &:hover {
    background: transparent;

    & .${stepClassnames.label} {
      color: ${({ theme }) => theme.palette.grey[700]};
    }

    & .${stepIconClassnames.root} {
      color: ${({ theme }) => theme.palette.primary[700]};

      &.${stepIconClassnames.success} {
        color: ${({ theme }) => theme.palette.success[700]};
      }

      &.${stepIconClassnames.error} {
        color: ${({ theme }) => theme.palette.error[700]};
      }

      &.${stepIconClassnames.warning} {
        color: ${({ theme }) => theme.palette.warning[700]};
      }
    }
  }

  &:active {
    background: transparent;
    & .${stepClassnames.label} {
      color: ${({ theme }) => theme.palette.grey[900]};
    }

    & .${stepIconClassnames.root} {
      color: ${({ theme }) => theme.palette.primary[800]};

      &.${stepIconClassnames.success} {
        color: ${({ theme }) => theme.palette.success[800]};
      }

      &.${stepIconClassnames.error} {
        color: ${({ theme }) => theme.palette.error[800]};
      }

      &.${stepIconClassnames.warning} {
        color: ${({ theme }) => theme.palette.warning[700]};
      }
    }
  }

  &:focus-visible {
    border-radius: ${({ theme }) => theme.shape.medium};
    outline: 1px solid ${({ theme }) => theme.palette.components.focused};
  }
`;
