import React from 'react';
import { FormField, Input } from '@wix/design-system';
import { BaseInputProps } from '../BaseInput';
import { Field } from '../Field';
import { dataHooks } from '../dataHooks';
import { useTextInput } from '../useTextInput';

export interface ShortTextProps extends BaseInputProps<string> {}

export const ShortText = ({
  dataHook,
  schema,
  initialValue,
  onChange,
}: ShortTextProps) => {
  const { value, charCount, handleChange } = useTextInput({
    initialValue,
    maxLength: schema.maxLength,
    onChange,
  });

  return (
    <Field dataHook={dataHook} type={schema.type}>
      <FormField
        dataHook={dataHooks.Label}
        label={schema.label}
        charCount={charCount}
      >
        <Input
          dataHook={dataHooks.Input}
          value={value}
          onChange={handleChange}
        />
      </FormField>
    </Field>
  );
};