export const TextFieldDemo = () => {
  const form = useForm<{ textField: string }>();
  return (
    <form onSubmit={form.handleSubmit(() => {})}>
      <TextField
        form={form}
        name="textField"
        label="A text between 10 and 50 characters"
        options={{
          required: {
            value: true,
            message: "Please provide a text between 10 and 50 characters",
          },
          minLength: {
            value: 10,
            message:
              "Choose a text that is equal or longer than 10 characters.",
          },
          maxLength: {
            value: 50,
            message: "Choose a text that is shorter or equal to 50 characters.",
          },
        }}
      />
      <Button type="submit">Submit</Button>
    </form>
  );
};

export const MultiLineTextFieldDemo = () => {
  const form = useForm<{ textField: string }>();
  const maxLength = 300;
  const [currentLength, setCurrentLength] = useState(0);

  return (
    <form onSubmit={form.handleSubmit(() => {})}>
      <MultiLineTextField
        form={form}
        name="textField"
        label="Long text with limit"
        helpText={`${currentLength}/${maxLength} Characters`}
        onChange={(e) => setCurrentLength(e.target.value.length || 0)}
        options={{
          required: { value: true, message: "Value is required" },
          maxLength: {
            value: maxLength,
            message: `${currentLength}/${maxLength} Characters`,
          },
        }}
      />
      <Button type="submit">Submit</Button>
    </form>
  );
};

export const NumberTextFieldDemo = () => {
  const form = useForm<{ textField: string }>();
  return (
    <form onSubmit={form.handleSubmit(() => {})} noValidate>
      <NumberTextField
        form={form}
        name="textField"
        label="A number between 2 and 10"
        options={{
          required: {
            value: true,
            message: "Please provide a number between 2 and 10",
          },
          min: {
            value: 2,
            message: "Choose a number that is greater or equal to 2.",
          },
          max: {
            value: 10,
            message: "Choose a number, that is smaller or equal to ten.",
          },
        }}
      />
      <Button type="submit">Submit</Button>
    </form>
  );
};

export const DecimalTextFieldDemo = () => {
  const form = useForm<{ textField: string }>();
  return (
    <form onSubmit={form.handleSubmit(() => {})} noValidate>
      <DecimalTextField
        step={0.05}
        form={form}
        name="textField"
        label="A number between 0 and 1"
        options={{
          required: {
            value: true,
            message: "Please provide a number between 0 and 1",
          },
          min: {
            value: 0,
            message: "Choose a number that is greater or equal to 0.",
          },
          max: {
            value: 1,
            message: "Choose a number, that is smaller or equal to 1.",
          },
        }}
      />
      <Button type="submit">Submit</Button>
    </form>
  );
};

export const PhoneNumberTextFieldDemo = () => {
  const form = useForm<{ phoneNumber?: string }>({ mode: "onBlur" });

  return (
    <form onSubmit={form.handleSubmit(() => {})}>
      <PhoneNumberTextField
        form={form}
        name="phoneNumber"
        options={{ required: false }}
      />
      <Button type="submit">Submit</Button>
    </form>
  );
};

export const CheckedTextFieldDemo = () => {
  const form = useForm<{ email: string }>({ mode: "onBlur" });
  return (
    <form onSubmit={form.handleSubmit(() => {})}>
      <CheckedTextField
        form={form}
        name="email"
        label="Email"
        options={{
          required: { value: true, message: "Value is required" },
          pattern: {
            value: /\S+@\S+\.\S+/,
            message: "Please provide a valid email address",
          },
        }}
      />
      <Button type="submit">Submit</Button>
    </form>
  );
};

export const CheckedAutocompleteTextFieldDemo = () => {
  const form = useForm<{ fruits: string }>();
  return (
    <form onSubmit={form.handleSubmit(() => {})}>
      <CheckedAutocompleteTextField
        form={form}
        name="fruits"
        label="Favourite Fruit"
        items={fruitOptions}
        minCharactersForSuggestion={1}
        options={{
          required: {
            value: true,
            message: "Please provide a value",
          },
        }}
      />
      <Button type="submit">Send</Button>
    </form>
  );
};

export const MaxLengthTextFieldDemo = () => {
  const form = useForm<{ text: string }>({
    defaultValues: { text: "Some existing text" },
  });
  return (
    <form onSubmit={form.handleSubmit(() => {})}>
      <MaxLengthTextField form={form} name="text" maxLength={70} />
      <Button type="submit">Submit</Button>
    </form>
  );
};

export const MaxLengthMultiLineTextFieldDemo = () => {
  const form = useForm<{ text: string }>({ mode: "onSubmit" });
  return (
    <form onSubmit={form.handleSubmit(() => {})}>
      <MaxLengthMultiLineTextField form={form} name="text" maxLength={200} />
      <ButtonGroup>
        <Button onClick={() => form.reset()}>Reset</Button>
        <Button variant="primary" type="submit">
          Submit
        </Button>
      </ButtonGroup>
    </form>
  );
};