import { ThemeValue } from 'styled-system';

import { BaseTheme } from '../base';
import {
  createCustomProps,
  CustomPropTypes,
} from '../../utils/createCustomProps';
import { ColorsWithHue } from '../primitives/colors';
import { Borders } from '../primitives/borders';

export const customBorder = createCustomProps({
  rounded: {
    property: 'borderRadius',
    scale: 'radii',
  },
  roundedTopLeft: {
    property: 'borderTopLeftRadius',
    scale: 'radii',
  },
  roundedTopRight: {
    property: 'borderTopRightRadius',
    scale: 'radii',
  },
  roundedBottomLeft: {
    property: 'borderBottomLeftRadius',
    scale: 'radii',
  },
  roundedBottomRight: {
    property: 'borderBottomRightRadius',
    scale: 'radii',
  },
  roundedTop: {
    properties: ['borderTopLeftRadius', 'borderTopRightRadius'],
    scale: 'radii',
  },
  roundedBottom: {
    properties: ['borderBottomLeftRadius', 'borderBottomRightRadius'],
    scale: 'radii',
  },
  roundedLeft: {
    properties: ['borderTopLeftRadius', 'borderBottomLeftRadius'],
    scale: 'radii',
  },
  roundedRight: {
    properties: ['borderTopRightRadius', 'borderBottomRightRadius'],
    scale: 'radii',
  },
  border: {
    property: 'border',
    scale: 'borders',
  },
  borderColor: {
    property: 'borderColor',
    scale: 'colors',
  },
});

type ResponsiveRounded = CustomPropTypes<ThemeValue<'radii', BaseTheme>>;

export interface CustomBorderProps {
  rounded?: ResponsiveRounded;
  roundedTopLeft?: ResponsiveRounded;
  roundedTopRight?: ResponsiveRounded;
  roundedBottomLeft?: ResponsiveRounded;
  roundedBottomRight?: ResponsiveRounded;
  roundedTop?: ResponsiveRounded;
  roundedBottom?: ResponsiveRounded;
  roundedLeft?: ResponsiveRounded;
  roundedRight?: ResponsiveRounded;
  border?: CustomPropTypes<keyof Borders>;
  borderColor?: CustomPropTypes<ColorsWithHue>;
}