import Form, {
  useInput,
  useSelect,
  useCheckbox,
  useTextArea
} from 'form-field-hooks';

const InputElement = () => {
  const name = useInput(
    {value: '', name: 'passwd', type: 'password'},
    {
      // this is to set the properties of the field's `meta`
      validations: (attr) => {
        if (attr.value.length < 8) {
          return [false, 'should be atleast 8 characters long.'];
        }
        return [true, ''];
      },
      display: (attr) => {
        if (attr.className && attr.className.includes('hide-input'))
          return false;
        return true;
      }
    }, React
  );

  const { touched, dirty, show, valid } = name.meta;

  // An Example of how `meta can be useful`
  const style = {boderColor: (touched || dirty) && !valid ? 'red' : 'none'};

  return (
    <Fragment>

      {/* Form.Input takes care of not rendering the input if `show` is False */}

      <Form.Input element={name} style={style} react={React} />
      {(
        !meta.valid &&
        meta.validationMessage.length // we get to set this in `options.validations`
      ) ? <ErrorMessage msg={meta.validationMessage} /> : <></>}


      {/* Or using without `Form` */}

      {show && <input element={name} style={style} />}
    </Fragment>
  )
}

const InputElements = () => {
  const name = useInput({value: 'luffy', name: 'name'}, {}, React);

  const isSaiyan = useCheckbox({name: 'isSaiyan', checked: true}, {}, React);
  const isSuper = useCheckbox({name: 'isSuper'}, {}, React);

  // Can be any Input Element
  // (text, checkbox, password, datetime
  // datetime-local, time, phone, checkbox etc)
  return (
    <Fragment>
      <Form.Input element={name} react={React} />
      <Form.Input element={isSuper} react={React} />
      <Form.Input element={isSaiyan} react={React} />
      
      {/** can also use
        * <input {...name.attr} />
        * <input {...isSuper.attr} />
        * <input {...isSaiyan.attr} />
        */}
    </Fragment>
  )
}

  const SelectElement = () => {
    const select = useSelect({value: '', name: 'select'}, {}, React);
    const multiselect = useSelect(
      {value: '', name: 'multiselect', multiple: true},
      {},
      React
    );

    return (
      <Fragment>
        {/*
          * Here the `defaultOption` attr will add
          * an extra null option
          * value: the value of the default option.
          * label: display value for the default option.
          * hideAfter: remove default option on any other value selection.
          */}

        <Form.Select
          element={select}
          defaultOption={{ value: '', label: '--', hideAfter: true}}
          react={React}
        >
          <option value='1'>One Piece</option>
          <option value='2'>Cowboy Bebop</option>
          <option value='3'>Death Note</option>
          <option value='4'>Naruto</option>
        </Form.Select>

        {/** can also use
          * <select {...multiselect.attr}>
          * ...
          * </select>
          */}
      </Fragment>
    )
  }

  const TextAreaElement = () => {
    const description = useTextArea({value: '', name: 'description'}, {}, React);

    return (
      <Fragment>
        <Field.TextArea element={description} react={React} />

        {/** can also use
          * <textarea {...description.attr} />
          */}
      </Fragment>
    )
  }