import styled from 'styled-components/macro';

import { color, other } from '../../../../theme';
import { assertUnreachable } from '../../../../utils/assertUnreachable';
import { FormMessageType } from '../../constants';
import { StyledHorizontalFieldMessage } from '../../styled';

export const animationDuration = 300;

export const StyledMessage = styled.div<{ $type: FormMessageType }>`
  align-items: center;
  color: ${(props) => {
    switch (props.$type) {
      case FormMessageType.Error:
        return color('sys/color/danger');
      case FormMessageType.Description:
        return color('sys/color/text/secondary');
      /* istanbul ignore next  */
      default:
        assertUnreachable(props.$type);
    }
  }};
  display: flex;
  font-size: 12px;
  opacity: 1;
  overflow: hidden;
  padding-top: 4px;
  position: relative;
  top: 0;
  transition-duration: ${animationDuration}ms;
  transition-property: max-height, opacity, padding-top;
  transition-timing-function: ${other('sys/timing-function/smooth')};

  &.enter {
    opacity: 0;
    padding-top: 0;
  }

  &.enter-active {
    opacity: 1;
    padding-top: 4px;
  }

  &.exit {
    opacity: 1;
    padding-top: 4px;
  }

  &.exit-active {
    opacity: 0;
    padding-top: 0;
  }

  ${StyledHorizontalFieldMessage} & {
    font-size: 14px;
    line-height: 16px;
    padding-top: 0;
  }
`;