import { css, CSSProperties } from 'glamor';
import { useApphouse } from '../../context/useApphouse';
import { useState } from 'react';
import { StyleOverwrites } from '../component.interfaces';
import React from 'react';
import { Text } from '../Text';

export type CheckboxStyles = CSSProperties;

export interface CheckboxProps extends StyleOverwrites<CheckboxStyles> {
  value?: boolean;
  label?: string;
  placeholder?: string;
  id: string;
  onChange?: (checked: boolean) => void;
  children?: React.ReactNode;
}

export const Checkbox: React.FC<CheckboxProps> = ({
  value = false,
  onChange,
  label,
  id
}) => {
  const [selected, setSelected] = useState<boolean>(value || false);
  const { theme } = useApphouse();
  const { tokens } = theme;
  return (
    <button
      {...css({
        display: 'flex',
        alignItems: 'center',
        border: 0,
        outline: 'none',
        backgroundColor: 'transparent',
        gridGap: tokens.spacings.s,
        color: 'inherit'
      })}
      onClick={(e) => {
        e.preventDefault();
        const value = !selected;
        setSelected(value);
        onChange && onChange(value);
      }}
    >
      {/* total hack to make the checkbox work */}
      <div {...css({ position: 'absolute', width: 20, height: 30 })} />
      <input
        id={id}
        type="checkbox"
        checked={selected}
        onChange={() => {
          const value = !selected;
          setSelected(value);
          onChange && onChange(value);
        }}
      />
      <Text variant="standard" as="label" htmlFor={id}>
        {label}
      </Text>
    </button>
  );
};