import { Grid } from '../Grid';
import { IconButton } from '../IconButton';
import { svgIconClassnames } from '../SvgIcon';
import { styled } from '../styled';
import { Typography } from '../Typography';
import { alertClassnames } from './constants';
export const StyledGrid = styled(Grid) `
  grid-auto-flow: column;
  grid-column: 2 / -1;
  justify-content: flex-start;
`;
export const StyledIconButton = styled(IconButton) `
  grid-column: 3;
  grid-row: 1;

  &:hover {
    background-color: rgb(0 0 0 / 4%);
  }
`;
export const Wrapper = styled.div `
  display: grid;
  grid-template-columns: 20px 1fr 32px;
  gap: ${({ theme }) => theme.microSpacing(7, 4)};

  padding: ${({ theme }) => theme.microSpacing(9, 8, 9, 8)};

  border: 1px solid transparent;
  border-radius: ${({ theme }) => theme.shape.medium};

  &.${alertClassnames.severityInfo} {
    background-color: ${({ theme }) => theme.palette.primary[100]};
    border-color: ${({ theme }) => theme.palette.primary[300]};

    .${alertClassnames.iconWrapper} {
      color: ${({ theme }) => theme.palette.primary[800]};
    }
  }

  &.${alertClassnames.severitySuccess} {
    background-color: ${({ theme }) => theme.palette.success[100]};
    border-color: ${({ theme }) => theme.palette.success[300]};

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

  &.${alertClassnames.severityError} {
    background-color: ${({ theme }) => theme.palette.error[100]};
    border-color: ${({ theme }) => theme.palette.error[300]};

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

  &.${alertClassnames.severityWarning} {
    background-color: ${({ theme }) => theme.palette.warning[100]};
    border-color: ${({ theme }) => theme.palette.warning[300]};

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

  /* hasCloseButton only */
  &.${alertClassnames.hasCloseButton}:not(.${alertClassnames.hasTitle}):not(.${alertClassnames.hasActions}) {
    padding: ${({ theme }) => theme.microSpacing(6, 6, 6, 8)};
  }

  /* hasActions only */
  &.${alertClassnames.hasActions}:not(.${alertClassnames.hasTitle}):not(.${alertClassnames.hasCloseButton}) {
    padding: ${({ theme }) => theme.microSpacing(9, 8, 8, 8)};
  }

  /* hasActions and hasCloseButton */
  &.${alertClassnames.hasActions}.${alertClassnames.hasCloseButton}:not(.${alertClassnames.hasTitle}) {
    padding: ${({ theme }) => theme.microSpacing(6, 6, 8, 8)};
  }

  /* hasTitle only */
  &.${alertClassnames.hasTitle}:not(.${alertClassnames.hasActions}):not(.${alertClassnames.hasCloseButton}) {
    padding: ${({ theme }) => theme.microSpacing(6, 8, 6, 8)};
  }

  /* hasTitle and hasCloseButton */
  &.${alertClassnames.hasTitle}.${alertClassnames.hasCloseButton}:not(.${alertClassnames.hasActions}) {
    padding: ${({ theme }) => theme.microSpacing(6, 6, 6, 8)};
  }

  /* hasTitle and hasActions */
  &.${alertClassnames.hasTitle}.${alertClassnames.hasActions}:not(.${alertClassnames.hasCloseButton}) {
    padding: ${({ theme }) => theme.microSpacing(6, 8, 8, 8)};
  }

  /* all three */
  &.${alertClassnames.hasTitle}.${alertClassnames.hasActions}.${alertClassnames.hasCloseButton} {
    padding: ${({ theme }) => theme.microSpacing(6, 6, 8, 8)};
  }

  &.${alertClassnames.hasTitle} {
    gap: ${({ theme }) => theme.spacing(3, 2)};

    .${alertClassnames.contentWrapper} {
      grid-template-rows: minmax(32px, auto) auto;
      align-items: center;
    }

    .${alertClassnames.content} {
      grid-row: 2;
    }
  }

  &:not(.${alertClassnames.hasTitle}) {
    .${alertClassnames.contentWrapper} {
      align-items: flex-start;
    }
  }

  &.${alertClassnames.hasCloseButton}:not(.${alertClassnames.hasTitle}) {
    .${alertClassnames.iconWrapper} {
      padding-top: ${({ theme }) => theme.microSpacing(3)};
    }
  }

  &.${alertClassnames.hasCloseButton} {
    .${alertClassnames.title} {
      grid-column: 2;
    }

    &:not(.${alertClassnames.hasTitle}) {
      .${alertClassnames.content} {
        grid-column: 2;
      }

      .${alertClassnames.contentWrapper} {
        grid-template-rows: minmax(32px, auto);
      }

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

    &.${alertClassnames.hasActions}:not(.${alertClassnames.hasTitle}) {
      .${alertClassnames.content} {
        padding: ${({ theme }) => theme.microSpacing(3, 0, 0)};
      }
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    grid-row-gap: ${({ theme }) => theme.spacing(4)};
    grid-template-columns: 24px 1fr 40px;

    padding: ${({ theme }) => theme.microSpacing(8, 8, 9, 8)};

    .${alertClassnames.contentWrapper} {
      grid-template-columns: 24px 1fr 40px;
    }

    /* hasCloseButton only */
    &.${alertClassnames.hasCloseButton}:not(.${alertClassnames.hasTitle}):not(.${alertClassnames.hasActions}) {
      padding: ${({ theme }) => theme.microSpacing(4, 4, 9, 8)};
    }

    /* hasActions only */
    &.${alertClassnames.hasActions}:not(.${alertClassnames.hasTitle}):not(.${alertClassnames.hasCloseButton}) {
      padding: ${({ theme }) => theme.microSpacing(8, 8, 10, 8)};
    }

    /* hasActions and hasCloseButton */
    &.${alertClassnames.hasCloseButton}.${alertClassnames.hasActions}:not(.${alertClassnames.hasTitle}) {
      padding: ${({ theme }) => theme.microSpacing(4, 4, 10, 8)};
    }

    /* hasTitle only */
    &.${alertClassnames.hasTitle}:not(.${alertClassnames.hasActions}):not(.${alertClassnames.hasCloseButton}) {
      padding: ${({ theme }) => theme.microSpacing(8, 8, 8, 8)};
    }

    /* hasTitle and hasCloseButton */
    &.${alertClassnames.hasTitle}.${alertClassnames.hasCloseButton}:not(.${alertClassnames.hasActions}) {
      padding: ${({ theme }) => theme.microSpacing(4, 4, 8, 8)};
    }

    /* hasTitle and hasActions */
    &.${alertClassnames.hasTitle}.${alertClassnames.hasActions}:not(.${alertClassnames.hasCloseButton}) {
      padding: ${({ theme }) => theme.microSpacing(8, 8, 10, 8)};
    }

    /* нет модификаторов */
    &:not(.${alertClassnames.hasTitle}):not(.${alertClassnames.hasActions}):not(.${alertClassnames.hasCloseButton}) {
      .${alertClassnames.content} {
        padding-top: ${({ theme }) => theme.microSpacing(1)};
      }
    }

    /* all three */
    &.${alertClassnames.hasTitle}.${alertClassnames.hasActions}.${alertClassnames.hasCloseButton} {
      padding: ${({ theme }) => theme.microSpacing(4, 4, 10, 8)};
    }

    /* for close button without title */
    &.${alertClassnames.hasCloseButton}:not(.${alertClassnames.hasTitle}) {
      .${alertClassnames.iconWrapper} {
        padding-top: ${({ theme }) => theme.spacing(2)};
      }
    }

    /* close button only case */
    &.${alertClassnames.hasCloseButton}:not(.${alertClassnames.hasTitle}):not(.${alertClassnames.hasActions}) {
      .${alertClassnames.content} {
        padding-top: ${({ theme }) => theme.microSpacing(5)};
        padding-bottom: 0;
      }
    }

    /* actions only case */
    &.${alertClassnames.hasActions}:not(.${alertClassnames.hasTitle}):not(.${alertClassnames.hasCloseButton}) {
      .${alertClassnames.content} {
        padding-top: ${({ theme }) => theme.microSpacing(1)};
        padding-bottom: 0;
      }
    }

    /* actions + close button case */
    &.${alertClassnames.hasActions}.${alertClassnames.hasCloseButton}:not(.${alertClassnames.hasTitle}) {
      .${alertClassnames.content} {
        padding-top: ${({ theme }) => theme.microSpacing(5)};
        padding-bottom: 0;
      }
    }
  }
`;
export const IconWrapper = styled.div `
  height: 20px;

  color: inherit;

  & .${svgIconClassnames.root} {
    font-size: 20px;

    ${({ theme }) => theme.breakpoints.down('sm')} {
      font-size: 24px;
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    height: 24px;
  }
`;
export const Content = styled.div `
  display: grid;
  grid-column: 1 / -1;
  grid-gap: ${({ theme }) => theme.microSpacing(1, 4)};
  grid-template-columns: 20px 1fr 32px;
  grid-template-rows: minmax(20px, auto);
  align-items: unset;

`;
export const StyledTypography = styled(Typography) `
  grid-column: 2 / -1;
  grid-row: 1;

  padding: 0;

  .${alertClassnames.hasTitle} & {
    grid-row: 2;
  }
`;
export const Title = styled(Typography) `
  grid-column: 2 / -1;
`;
