import React, { forwardRef } from 'react'
import { Box, Flex, SVG } from './Base'
import { getMarginProps, omitMarginProps } from '@utils/helpers'

export const Label = forwardRef((props, ref) => (
    <Flex
        ref={ref}
        as="label"
        tx="forms"
        variant="label"
        {...props}
        __css={{
            width: '100%',
            fontWeight: 'bold',
            cursor: 'pointer',
        }}
    />
))

export const Input = forwardRef((props, ref) => (
    <Box
        ref={ref}
        as="input"
        type="text"
        tx="forms"
        variant="input"
        {...props}
        __css={{
            display: 'block',
            width: '100%',
            p: 2,
            appearance: 'none',
            fontSize: 'inherit',
            lineHeight: 'inherit',
            border: '1px solid',
            borderRadius: 3,
            color: 'inherit',
            bg: 'transparent',
        }}
    />
))

export const Textarea = forwardRef((props, ref) => (
    <Box
        ref={ref}
        as="textarea"
        tx="forms"
        variant="textarea"
        {...props}
        __css={{
            display: 'block',
            width: '100%',
            p: 2,
            appearance: 'none',
            fontSize: 'inherit',
            lineHeight: 'inherit',
            border: '1px solid',
            borderRadius: 3,
            color: 'inherit',
            bg: 'transparent',
        }}
    />
))

const SelectArrow = props => (
    <SVG {...props}>
        <path d="M5.293 6.95L6 7.657 11.657 2 10.243.586 6 4.828 1.757.586.343 2z" />
    </SVG>
)

export const Select = forwardRef((props, ref) => (
    <Flex {...getMarginProps(props)}>
        <Box
            ref={ref}
            as="select"
            tx="forms"
            variant="select"
            {...omitMarginProps(props)}
            __css={{
                display: 'block',
                width: '100%',
                p: 2,
                appearance: 'none',
                fontSize: 'inherit',
                lineHeight: 'inherit',
                border: '1px solid',
                borderRadius: 3,
                color: 'inherit',
                bg: 'transparent',
            }}
        />
        <SelectArrow
            width="12"
            height="8"
            aria-hidden={true}
            sx={{
                position: 'relative',
                right: 2,
                ml: '-12px',
                alignSelf: 'center',
                pointerEvents: 'none',
            }}
        />
    </Flex>
))

const RadioChecked = props => (
    <SVG {...props}>
        <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
    </SVG>
)

const RadioUnchecked = props => (
    <SVG {...props}>
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
    </SVG>
)

const RadioIcon = props => (
    <>
        <RadioChecked
            {...props}
            __css={{
                display: 'none',
                'input:checked ~ &': {
                    display: 'block',
                },
            }}
        />
        <RadioUnchecked
            {...props}
            __css={{
                display: 'block',
                'input:checked ~ &': {
                    display: 'none',
                },
            }}
        />
    </>
)

export const Radio = forwardRef(
    ({ className, sx, variant = 'radio', ...props }, ref) => (
        <Box>
            <Box
                ref={ref}
                as="input"
                type="radio"
                {...props}
                sx={{
                    position: 'absolute',
                    overflow: 'hidden',
                    width: 1,
                    height: 1,
                    opacity: 0,
                    zIndex: -1,
                }}
            />
            <Box
                as={RadioIcon}
                aria-hidden={true}
                tx="forms"
                variant={variant}
                className={className}
                sx={sx}
                // {...getSystemProps(props)}
                __css={{
                    mr: 2,
                    borderRadius: 'full',
                    color: 'gray',
                    'input:checked ~ &': {
                        color: 'gray.900',
                    },
                    'input:focus ~ &': {
                        bg: 'gray.400',
                    },
                }}
            />
        </Box>
    )
)

const CheckboxChecked = props => (
    <SVG {...props}>
        <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
    </SVG>
)

const CheckboxUnchecked = props => (
    <SVG {...props}>
        <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
    </SVG>
)

const CheckboxIcon = props => (
    <>
        <CheckboxChecked
            {...props}
            __css={{
                display: 'none',
                'input:checked ~ &': {
                    display: 'block',
                },
            }}
        />
        <CheckboxUnchecked
            {...props}
            __css={{
                display: 'block',
                'input:checked ~ &': {
                    display: 'none',
                },
            }}
        />
    </>
)

export const Checkbox = forwardRef(
    ({ className, sx, variant = 'checkbox', ...props }, ref) => (
        <Box>
            <Box
                ref={ref}
                as="input"
                type="checkbox"
                {...props}
                sx={{
                    position: 'absolute',
                    opacity: 0,
                    zIndex: -1,
                    width: 1,
                    height: 1,
                    overflow: 'hidden',
                }}
            />
            <Box
                as={CheckboxIcon}
                aria-hidden={true}
                tx="forms"
                variant={variant}
                className={className}
                sx={sx}
                // {...getSystemProps(props)}
                __css={{
                    mr: 2,
                    borderRadius: 3,
                    color: 'gray.900',
                    'input:checked ~ &': {
                        color: 'gray.900',
                    },
                    'input:focus ~ &': {
                        color: 'gray.900',
                        bg: 'gray.400',
                    },
                }}
            />
        </Box>
    )
)

export const Switch = forwardRef(({ checked, ...props }, ref) => {
    const switchSize = 6

    return (
        <Box
            ref={ref}
            as="button"
            type="button"
            role="switch"
            tx="forms"
            variant="switch"
            aria-checked={checked}
            {...props}
            __css={{
                appearance: 'none',
                m: 0,
                p: 0,
                width: switchSize * 2,
                height: switchSize,
                color: 'gray.600',
                bg: 'transparent',
                border: '1px solid',
                borderColor: 'gray.900',
                borderRadius: 'full',
                // '&[aria-checked=true]': {
                //     bg: 'gray.100',
                // },
                ':focus': {
                    outline: 'none',
                    boxShadow: '0 0 0 2px',
                },
            }}
        >
            <Box
                aria-hidden={true}
                style={{
                    transform: checked
                        ? `translateX(${switchSize * 4}px)`
                        : 'translateX(0)',
                }}
                sx={{
                    mt: '-1px',
                    ml: '-1px',
                    width: switchSize,
                    height: switchSize,
                    borderRadius: 'full',
                    border: '1px solid',
                    borderColor: 'gray.900',
                    bg: checked ? 'gray.700' : 'gray.400',
                    transitionProperty: 'transform',
                    transitionTimingFunction: 'ease-out',
                    transitionDuration: '0.1s',
                }}
            />
        </Box>
    )
})

export const Slider = forwardRef(({ ...props }, ref) => (
    <Box
        ref={ref}
        as="input"
        type="range"
        tx="forms"
        variant="slider"
        {...props}
        __css={{
            display: 'block',
            width: '100%',
            height: '2px',
            my: 3,
            cursor: 'pointer',
            appearance: 'none',
            borderRadius: 'full',
            color: 'gray.500',
            bg: 'gray.200',
            ':focus': {
                outline: 'none',
                color: 'gray.700',
            },
            '&::-webkit-slider-thumb': {
                appearance: 'none',
                width: 6,
                height: 6,
                bg: 'currentcolor',
                border: '1px solid',
                borderColor: 'gray.900',
                borderRadius: 'full',
            },
        }}
    />
))