// @ts-nocheck
import * as React from 'react';
import styled from '../styled';
import sx from '@styled-system/css';
import { compose } from 'styled-system';
import variant from '@styled-system/variant';
import shouldForwardProp from '@styled-system/should-forward-prop';
import View from '../view';
import Text from '../text';
import { Theme } from '../theme';
import { InputProps } from '../input';

const CheckIcon = props => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" {...props}>
    <path
      fill="currentColor"
      fillRule="evenodd"
      d="M12.0228801,4.09836092 C11.9008106,3.96721303 11.7017944,3.96721303 11.580524,4.09836092 L6.92136893,9.04682175 C6.79929939,9.17882239 6.59989385,9.17882239 6.47862349,9.04682175 L4.43735508,6.82878672 C4.37712974,6.76277547 4.29735523,6.73021808 4.21801105,6.72978077 C4.13784719,6.72934347 4.056044,6.76190086 3.99458914,6.82878672 L3.09278679,7.69377687 C3.03254095,7.75976626 3,7.84182662 3,7.92780087 C3,8.01421243 3.03254095,8.10410056 3.09278679,8.16969637 L5.15155517,10.4745584 C5.27323538,10.606559 5.47264091,10.8197673 5.59391128,10.9504779 L6.47944316,11.902295 C6.60071352,12.0325683 6.79970922,12.0325683 6.92177877,11.902295 L12.9084325,5.52609757 C13.0305225,5.39538697 13.0305225,5.18067001 12.9084325,5.04995941 L12.0228801,4.09836092 L12.0228801,4.09836092 Z"
    />
  </svg>
);

const DotIcon = props => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" {...props}>
    <rect
      width="4"
      height="4"
      fill="currentColor"
      fillRule="evenodd"
      rx="2"
      transform="translate(6 6)"
    />
  </svg>
);

const inputVariant = variant({
  variants: {
    onWhite: {
      '& ~ [data-indicator]': {
        color: 'white',
      },
      [`&:checked ~ [data-indicator]`]: {
        backgroundColor: 'gray.0',
        boxShadow: (theme: Theme) => `inset 0 0 0 2px ${theme.colors.gray[0]}`,
      },
    },
    onBlack: {
      '& ~ [data-indicator]': {
        color: 'white',
      },
      [`&:checked ~ [data-indicator]`]: {
        backgroundColor: 'TEDRed.0',
        boxShadow: (theme: Theme) =>
          `inset 0 0 0 2px ${theme.colors.TEDRed[1]}`,
      },
    },
  },
});

const Indicator = styled(View, { shouldForwardProp })(
  sx({
    backgroundColor: 'inherit',
    color: 'currentColor',
    position: 'absolute',
    userSelect: 'none',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  }),
);

const Control = styled('input', { shouldForwardProp })(
  props =>
    sx({
      opacity: 0,
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      '&:focus ~ [data-indicator]': {
        boxShadow: (theme: Theme) =>
          `inset 0 0 0 2px ${theme.colors.gray[1]}, 0 0 ${theme.space[1]} 1px ${theme.colors.TEDRed[0]}`,
      },
      '&:focus:checked ~ [data-indicator]': {
        boxShadow: (theme: Theme) =>
          `inset 0 0 0 2px ${theme.colors.gray[0]}, 0 0 ${theme.space[1]} 1px ${theme.colors.TEDRed[1]}`,
      },
      '& ~ [data-indicator]': {
        transition: 'background-color .1s linear, color .1s linear',
        boxShadow: (theme: Theme) => `inset 0 0 0 2px ${theme.colors.gray[2]}`,
        backgroundColor: 'currentColor',
        borderRadius: props.type === 'checkbox' ? 1 : '50%',
      },
      '& ~ [data-indicator] > [data-indicator-icon]': {
        transition: 'opacity .1s linear, color .1s linear',
        opacity: 0,
        color: 'currentColor',
      },
      '&:checked ~ [data-indicator] > [data-indicator-icon]': {
        opacity: 1,
      },
      '&[disabled]': {
        cursor: 'not-allowed',
        '& ~ [data-indicator]': {
          cursor: 'not-allowed',
          boxShadow: (theme: Theme) =>
            `inset 0 0 0 2px ${theme.colors.gray[1]}`,
          backgroundColor: 'gray.2',
          color: 'gray.1',
        },
        '&:checked ~ [data-indicator]': {
          boxShadow: (theme: Theme) =>
            `inset 0 0 0 2px ${theme.colors.gray[1]}`,
          backgroundColor: 'gray.2',
          color: 'gray.1',
        },
        '& ~ [data-indicator] > [data-indicator-icon]': {
          opacity: 0,
          color: 'currentColor',
        },
        '&:checked ~ [data-indicator] > [data-indicator-icon]': {
          opacity: 1,
        },
      },
    }),
  compose(inputVariant),
);

const Selectable = ({
  valid,
  invalid,
  ...props
}: InputProps & { label: React.ReactNode; type: 'checkbox' | 'radio' }) => {
  const labelColor: string = React.useMemo(
    () =>
      props.disabled
        ? 'gray.1'
        : props.variant === 'onBlack'
        ? 'white'
        : 'gray.0',
    [props.disabled, props.variant],
  );

  return (
    <View as="label" sx={{ flexDirection: 'row', alignItems: 'center' }}>
      <View
        sx={{
          position: 'relative',
          width: 4,
          height: 4,
          marginRight: 4,
          borderRadius: props.type === 'checkbox' ? 1 : '50%',
        }}
      >
        <Control {...props} />
        <Indicator data-indicator>
          {props.type === 'checkbox' ? (
            <CheckIcon data-indicator-icon />
          ) : (
            <DotIcon data-indicator-icon />
          )}
        </Indicator>
      </View>
      <View>
        <Text color={labelColor} variant="-1r">
          {props.label}
        </Text>
      </View>
    </View>
  );
};

Selectable.defaultProps = {
  type: 'checkbox',
  variant: 'onWhite',
};

export default Selectable;