import styled from 'styled-components'
import React from 'react'
import { InputWrapper } from '../InputWrapper/InputWrapper'
import { IJsonSchema } from '../../types/IJsonSchema'

export type CheckboxProps = {
  label?: string
  value?: boolean
  /**
   * custom styling for checkbox
   */
  css?: string
  onChange: (change: boolean) => void
  /**
   * schema for validation
   */
  jsonSchema?: IJsonSchema
  name: string
}

export const Checkbox = ({
  label,
  value,
  css,
  onChange,
  jsonSchema,
  name,
}: CheckboxProps):JSX.Element => {

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    onChange(event.target.checked)
  }
  
  return (
    <InputWrapper 
      label={label} 
      jsonSchema={jsonSchema}
      value={value}>
      <StyledCheckbox
        type="checkbox"
        name={name}
        checked={value}
        onChange={handleChange}
        css={css}
      />
    </InputWrapper>
  )
}

const StyledCheckbox = styled.input<{css?:string}>` 
  max-width: fit-content;
  border: none;
  border-radius: 1px;
  min-height:36px;
  margin:0px;
  cursor: pointer;
  
  ${(p) => p.css}
`

