import styled from '@emotion/native';
import { ViewProps as ViewPropsBase } from 'react-native';
import { variant } from 'styled-system';
import { ViewStyle } from '@emotion/react';
import { useTheme } from 'hooks/theme';
import { Container, StyleSystemThemedProps } from '../layout';

const sizeVariants: Record<CardSizeVariant, ViewStyle> = {
  'extra-small': {
    padding: 'xs',
  },
  small: {
    padding: 's',
  },
  medium: {
    padding: 'm',
  },
  large: {
    padding: 'l',
  },
};

const colorVariants: Record<CardColorVariant, ViewStyle> = {
  base: {
    backgroundColor: 'base',
  },
  'base-01': {
    backgroundColor: 'base-01',
  },
  'base-02': {
    backgroundColor: 'base-02',
  },
  'base-02-hover': {
    backgroundColor: 'base-02-hover',
  },
  'base-03': {
    backgroundColor: 'base-03',
  },
  transparent: {
    backgroundColor: 'transparent',
  },
};
const variants: Record<CardVariant, ViewStyle> = {
  plain: {},
  float: {
    shadowOffset: {
      width: 0,
      height: 0,
    },
    elevation: 5,
    shadowOpacity: 0.08,
    shadowRadius: 10,
    borderWidth: 1,
    borderColor: 'transparent',
  },
  'float-outline': {
    shadowOffset: {
      width: 0,
      height: 0,
    },
    elevation: 5,
    shadowOpacity: 0.08,
    shadowRadius: 10,
    borderWidth: 1,
    borderColor: 'divider',
  },
  outline: {
    borderWidth: 1,
    borderColor: 'divider',
  },
};

const shapeVariants: Record<CardShapeVariant, ViewStyle> = {
  round: {
    borderRadius: 'card',
  },
  square: {
    borderRadius: 0,
  },
};

export const LocalCard = styled(Container)<CardProps>(
  variant({
    variants,
  }),
  variant({
    prop: 'sizeVariant',
    variants: sizeVariants,
  }),
  variant({
    prop: 'shapeVariant',
    variants: shapeVariants,
  }),
  variant({
    prop: 'colorVariant',
    variants: colorVariants,
  })
);

export const Card: React.FC<CardType> = ({ shapeVariant = 'round', ...props }) => {
  const { theme, activeThemeMode } = useTheme();
  const shadowColor = activeThemeMode === 'dark' ? theme.colors['grey-02'] : undefined;
  return <LocalCard shapeVariant={shapeVariant} shadowColor={shadowColor} {...props} />;
};

export type CardVariant = 'outline' | 'plain' | 'float' | 'float-outline';
export type CardColorVariant =
  | 'base'
  | 'base-01'
  | 'base-02'
  | 'base-02-hover'
  | 'base-03'
  | 'transparent';
export type CardSizeVariant = 'extra-small' | 'small' | 'medium' | 'large';
export type CardShapeVariant = 'round' | 'square';

type CardType = CardProps & StyleSystemThemedProps;
export interface CardProps extends ViewPropsBase {
  variant: CardVariant;
  shapeVariant?: CardShapeVariant;
  sizeVariant?: CardSizeVariant;
  colorVariant?: CardColorVariant;
}