import { CSSProperties } from 'react';
import { SxObject } from '../../components/common';
import css from '../css';

describe('toStyle', () => {
  it('converts all system properties and is theme-aware', () => {
    const sxObject: SxObject = {
      bgColor: 'blue-dark-30',
      borderColor: 'grotesque-green-light-75',
      borderRadius: 'base',
      borderStyle: 'solid',
      borderWidth: 'base',
      color: 'violet-light-90',
      fontSize: 'medium',
      fontWeight: 'semi-bold',
      lineHeight: 'medium',
      m: 'xxsmall',
      mb: 'xsmall',
      ml: 'small',
      mr: 'medium',
      mt: 'large',
      p: 'xlarge',
      pb: 'xxlarge',
      pl: 'xxxlarge',
      pr: 'xxxxlarge',
      pt: 'xxsmall',
    } as const;

    const cssObject: CSSProperties = {
      backgroundColor: '#1485a7',
      borderColor: '#dafce4',
      borderRadius: '4px',
      borderStyle: 'solid',
      borderWidth: '1px',
      color: '#f1e9fb',
      fontSize: '14px',
      fontWeight: 600,
      lineHeight: '22px',
      margin: '2px',
      marginBottom: '4px',
      marginLeft: '8px',
      marginRight: '16px',
      marginTop: '24px',
      padding: '32px',
      paddingBottom: '40px',
      paddingLeft: '48px',
      paddingRight: '56px',
      paddingTop: '2px',
    };

    expect(css(sxObject)).toEqual(cssObject);
  });

  it('does not convert css properties', () => {
    const cssObject: CSSProperties = {
      display: 'flex',
      flexWrap: 'wrap-reverse',
      alignContent: 'center',
      backgroundColor: 'chocolate',
      borderColor: '#dafce4',
      borderRadius: '4px',
      borderStyle: 'dashed',
      borderWidth: '1em',
      color: '#f1e9fb',
      fontSize: 14,
      fontWeight: 600,
      lineHeight: 22,
      margin: '2rem',
      marginBottom: 4,
      marginLeft: 8,
      marginRight: 16,
      marginTop: 24,
      padding: 32,
      paddingBottom: 40,
      paddingLeft: '10%',
      paddingRight: '3vw',
      paddingTop: '2vh',
    };

    expect(css(cssObject)).toEqual(cssObject);
  });

  it('converts both system and css properties, and is also theme-aware', () => {
    const sxObject: SxObject = {
      textAlign: 'right',
      bgColor: 'gold',
      borderColor: 'smalt-light-45',
      borderRadius: 'medium',
      borderStyle: 'dotted',
      borderWidth: 2,
      color: '#f1e9fb',
      fontSize: 25,
      fontWeight: 'bold',
      lineHeight: '25px',
      margin: 2,
      mb: '4px',
      marginLeft: '8px',
      mr: 16,
      marginTop: 24,
      p: 'small',
      paddingBottom: 'medium',
      paddingLeft: 'large',
      pr: 'xsmall',
      paddingTop: 'xlarge',
    };

    const cssObject: CSSProperties = {
      textAlign: 'right',
      backgroundColor: 'gold',
      borderColor: '#7390b9',
      borderRadius: '10px',
      borderStyle: 'dotted',
      borderWidth: 2,
      color: '#f1e9fb',
      fontSize: 25,
      fontWeight: 700,
      lineHeight: '25px',
      margin: 2,
      marginBottom: '4px',
      marginLeft: '8px',
      marginRight: 16,
      marginTop: 24,
      padding: '8px',
      paddingBottom: '16px',
      paddingLeft: '24px',
      paddingRight: '4px',
      paddingTop: '32px',
    };

    expect(css(sxObject)).toEqual(cssObject);
  });
});