import type * as CSS from 'csstype';
import { TLengthStyledSystem as StringOrNumber } from 'styled-system';

import {
  createCustomProps,
  CustomPropTypes,
} from '../../utils/createCustomProps';

export const customLayout = createCustomProps({
  w: {
    property: 'width',
    scale: 'sizes',
  },
  h: {
    property: 'height',
    scale: 'sizes',
  },
  size: {
    properties: ['width', 'height'],
    scale: 'sizes',
  },
  minW: {
    property: 'minWidth',
    scale: 'sizes',
  },
  minH: {
    property: 'minHeight',
    scale: 'sizes',
  },
  maxW: {
    property: 'maxWidth',
    scale: 'sizes',
  },
  maxH: {
    property: 'maxHeight',
    scale: 'sizes',
  },
});

export interface CustomLayoutProps {
  w?: CustomPropTypes<CSS.Property.Width<StringOrNumber>>;
  h?: CustomPropTypes<CSS.Property.Height<StringOrNumber>>;
  size?: CustomPropTypes<CSS.Property.Height<StringOrNumber>>;
  minW?: CustomPropTypes<CSS.Property.MinWidth<StringOrNumber>>;
  minH?: CustomPropTypes<CSS.Property.MinHeight<StringOrNumber>>;
  maxW?: CustomPropTypes<CSS.Property.MaxWidth<StringOrNumber>>;
  maxH?: CustomPropTypes<CSS.Property.MaxHeight<StringOrNumber>>;
}