import {
  cardHeaderClasses,
  CardContent as MuiCardContent,
  styled,
} from '@mui/material'
import type React from 'react'
import type { FormType } from '../../stores/form/types.js'
import { Card } from '../Card/Card.js'
import { CardHeader } from '../Card/CardHeader.js'

export const SelectTokenCardHeader: React.FC<
  React.ComponentProps<typeof CardHeader> & {
    selected?: boolean
  }
> = styled(CardHeader, {
  shouldForwardProp: (prop) => !['selected'].includes(prop as string),
})<{ selected?: boolean }>(({ theme }) => ({
  padding: theme.spacing(2),
  [`.${cardHeaderClasses.title}`]: {
    color: theme.vars.palette.text.secondary,
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    width: 96,
    fontSize: 18,
    fontWeight: 500,
    [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
      fontSize: 16,
    },
  },
  [`.${cardHeaderClasses.subheader}`]: {
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    width: 96,
  },
  variants: [
    {
      props: ({ selected }) => selected,
      style: {
        [`.${cardHeaderClasses.title}`]: {
          color: theme.vars.palette.text.primary,
          fontWeight: 600,
        },
      },
    },
  ],
}))

export const SelectTokenCard: React.FC<
  React.ComponentProps<typeof Card> & {
    formType?: FormType
    mask?: boolean
  }
> = styled(Card)(({ theme }) => {
  const cardVariant = theme.components?.MuiCard?.defaultProps?.variant
  return {
    flex: 1,
    ...(cardVariant !== 'outlined' && {
      background: 'none',
      '&:hover': {
        cursor: 'pointer',
        background: 'none',
      },
    }),
  }
})

export const CardContent: React.FC<
  React.ComponentProps<typeof MuiCardContent> & {
    formType?: FormType
    mask?: boolean
  }
> = styled(MuiCardContent, {
  shouldForwardProp: (prop) => !['formType', 'mask'].includes(prop as string),
})<{ formType?: FormType; mask?: boolean }>(
  ({ theme, formType, mask = true }) => {
    const cardVariant = theme.components?.MuiCard?.defaultProps?.variant
    const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'
    const horizontal = direction
    const vertical = '50%'
    return {
      padding: 0,
      transition: theme.transitions.create(['background-color'], {
        duration: theme.transitions.duration.enteringScreen,
        easing: theme.transitions.easing.easeOut,
      }),
      '&:last-child': {
        paddingBottom: 0,
      },
      ...(cardVariant !== 'outlined' && {
        backgroundColor: theme.vars.palette.background.paper,
        mask: mask
          ? `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`
          : 'none',
      }),
      ...(cardVariant === 'filled' && {
        '&:hover': {
          cursor: 'pointer',
          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,
          ...theme.applyStyles('dark', {
            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,
          }),
        },
      }),
    }
  }
)