import React, { useState } from 'react';
import { Checkbox as CheckboxWSR } from '@wix/design-system';
import { BaseInputProps } from '../BaseInput';
import { Field } from '../Field';
import { dataHooks } from '../dataHooks';

export interface CheckboxProps extends BaseInputProps<boolean> {}

export const Checkbox = ({
  dataHook,
  schema,
  initialValue,
  onChange,
}: CheckboxProps) => {
  const [value, setValue] = useState(initialValue);
  return (
    <Field dataHook={dataHook} type={schema.type}>
      <CheckboxWSR
        dataHook={dataHooks.Input}
        checked={value}
        onChange={(e) => {
          setValue(e.target.checked);
          onChange(e.target.checked);
        }}
      >
        {schema.label}
      </CheckboxWSR>
    </Field>
  );
};