import MuiCard from '@mui/material/Card';
import MuiDivider from '@mui/material/Divider';
import MuiGrid from '@mui/material/Grid';
import { styled } from '@mui/material/styles';
import type { CSSObject } from '@mui/material/styles';

import type { Theme } from '../../@styles/theme-provider';

import { CardProps, CardColumnProps } from './types';

type StyledCardProps = Pick<
  CardProps,
  'active' | 'hovered' | 'disabled' | 'disableInteractive' | 'indicator' | 'indicatorColor'
>;

export const StyledCard = styled(MuiCard, {
  shouldForwardProp: prop =>
    prop !== 'active' &&
    prop !== 'hovered' &&
    prop !== 'disabled' &&
    prop !== 'disableInteractive' &&
    prop !== 'indicator' &&
    prop !== 'indicatorColor'
})<StyledCardProps>(
  ({
    active,
    hovered,
    disabled,
    disableInteractive,
    indicator,
    indicatorColor,
    theme
  }: StyledCardProps & { theme: Theme }) => {
    const activeState: CSSObject = {
      background: theme.palette.secondary[100],
      boxShadow: 'none',
      '& #actionButton': {
        visibility: 'visible',
        opacity: 1,
        '&:hover, &:focus, &.activeActionButton, &:active': {
          backgroundColor: `${theme.palette.common.white} !important`
        }
      },
      '& #textGroupAvatar': {
        backgroundColor: theme.palette.common.white
      }
    };
    const hoveredState: CSSObject = {
      boxShadow: theme.shadows[6],
      '& #actionButton': {
        visibility: 'visible',
        opacity: 1,
        '&:hover, &:focus, &.activeActionButton, &:active': {
          backgroundColor: theme.palette.secondary[100]
        }
      }
    };
    const disabledState: CSSObject = {
      boxShadow: 'none',
      pointerEvents: 'none',
      '& .MuiGrid-item > *': {
        opacity: 0.5
      },
      ...(indicator && {
        borderLeftColor: theme.palette.primary[200]
      })
    };
    return {
      ...theme.typography.body2,
      color: theme.palette.primary[500],
      position: 'relative',
      display: 'flex',
      alignItems: 'center',
      background: theme.palette.common.white,
      borderColor: theme.palette.primary[200],
      borderRadius: theme.spacing(0.5),
      boxShadow: 'none',
      minHeight: theme.spacing(11),
      padding: theme.spacing(1.5, 3, 1.5, indicator ? 2.5 : 3),
      ...(!disableInteractive && {
        '&:hover, &.Mui-hovered': hoveredState,
        ...(hovered && hoveredState),
        ...(active && activeState)
      }),
      ...(indicator && {
        borderLeft: `${theme.spacing(0.5)} solid ${indicatorColor || theme.palette.secondary[500]}`
      }),
      ...(disabled && disabledState)
    };
  }
);

type StyledColumnProps = Pick<CardColumnProps, 'align'>;

export const StyledColumn = styled(MuiGrid, {
  shouldForwardProp: prop =>
    prop !== 'actions' &&
    prop !== 'align' &&
    prop !== 'cellClassName' &&
    prop !== 'cellEmptyState' &&
    prop !== 'headerClassName' &&
    prop !== 'renderCell' &&
    prop !== 'renderHeader' &&
    prop !== 'type'
})<StyledColumnProps>(({ align, theme }: StyledColumnProps & { theme: Theme }) => ({
  display: 'flex',
  alignItems: 'center',
  WebkitTapHighlightColor: 'transparent',
  ...(align && {
    justifyContent: align === 'center' ? align : `flex-${align}`
  }),
  ...(align === 'center' && {
    textAlign: 'center'
  })
}));

export const StyledDivider = styled(MuiDivider)(({ theme }: { theme: Theme }) => ({
  backgroundColor: 'inherit',
  backgroundImage: theme.palette.background.verticalDivider,
  border: 'none',
  margin: theme.spacing(0, 3),
  width: theme.spacing(1 / 8)
}));