import React from 'react'
import { css } from '@emotion/css';
import {
    hex2rgb,
    luminance,
    isAAPassing,
    contrastRatio,
} from './utils/color';
import { colors } from '@knkui/theme';
import { Heading, Paragraph } from '@knkui/typography';

type Props = {
    hexColor: string
    name: string
}

const Lozenge = ({ pass }: { pass: boolean }) => (
    <div
        className={css({
            color: '#FFF',
            textTransform: 'uppercase',
            background: '#000',
            borderRadius: '10px',
            padding: '0 6px',
            display: 'flex',
            textAlign: 'center',
            letterSpacing: '0',
            lineHeight: '1.6',
            fontSize: '10px',
        })}
    >
        {pass ? 'Pass' : 'Fail'}
    </div>
);

const Swatch: React.FC<Props> = ({ hexColor, name }) => {
    const rgb = hex2rgb(hexColor);
    const colorLum = luminance(rgb);
    const darkLum = luminance(hex2rgb(colors.N800));
    const lightLum = 1; // white
    const darkContrastRatio = contrastRatio(colorLum, darkLum);
    const lightContrastRatio = contrastRatio(colorLum, lightLum);


    return (
        <div
            className={css({
                borderRadius: 4,
                overflow: 'hidden',
                backgroundColor: colors.N10,
                gridColumn: 'span 4',
            })}
        >
            <div
                className={css({
                    backgroundColor: hexColor,
                    minHeight: 120,
                    padding: 10,
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'flex-end',
                    flexWrap: 'wrap',
                    textAlign: 'center',
                    '> div': { margin: '0 2px' },
                })}
            >
                <div>
                    <span className={css({ fontSize: 18, color: colors.N800 })}>A</span>
                    <Lozenge pass={isAAPassing(darkContrastRatio, 'large')} />
                </div>
                <div>
                    <span className={css({ fontSize: 14, color: colors.N800 })}>A</span>
                    <Lozenge pass={isAAPassing(darkContrastRatio)} />
                </div>
                <div>
                    <span className={css({ fontSize: 18, color: colors.N0 })}>A</span>
                    <Lozenge pass={isAAPassing(lightContrastRatio, 'large')} />
                </div>
                <div>
                    <span className={css({ fontSize: 14, color: colors.N0 })}>A</span>
                    <Lozenge pass={isAAPassing(lightContrastRatio)} />
                </div>
            </div>
            <div
                className={css({
                    padding: 30,
                    display: 'flex',
                    justifyContent: 'space-between',
                    flexWrap: 'wrap',
                    '> div': {
                        marginTop: 10,
                        ':first-of-type': { margin: 0 },
                    },
                })}
            >
                <div className={css({ width: '100%' })}>
                    <Heading is="h4" size={100}>Name</Heading>
                    <Paragraph>{name}</Paragraph>
                </div>

                <div>
                    <Heading is="h4" size={100}>Hex</Heading>
                    <Paragraph>{hexColor}</Paragraph>
                </div>

                <div>
                    <Heading is="h4" size={100}>RGB</Heading>
                    <Paragraph>{rgb}</Paragraph>
                </div>
            </div>
        </div>
    )
}

export default Swatch