<TInputText
  type="email"
  label="Email" //
/>

<TInputText
  type="number"
  label="Price"
  placeholder="1.00"
  hint="Enter the product price"
  prefix="$"
  suffix="USD"
  nativeAppearance
/>

<TInputText
  type="url"
  label="Home page"
  hint="Enter up to 28 characters"
  placeholder="https://dija.sa"
  prepend={(params) => <TIcon icon="mdi:link-variant" color={params.color} size="18" />}
  counterMax="28"
  persistentPlaceholder
  persistentHint
  counter
/>

<TInputText
  controller={TInputTextController.create({ value: "[email protected]" })}
  type="email"
  label="Email"
  hint="Enter up to 28 characters"
  persistentHint
  clearable
/>

<TInputText
  controller={TInputTextController.create({ value: "2018-06-12T19:30" })}
  type="datetime-local"
  label="Date and Time of arrival"
/>

<TInputText
  type="textarea"
  label="Write a message"
  placeholder="There are many variations of passages of Lorem Ipsum available."
  hint="Enter up to 640 characters"
  counterMax="640"
  textAreaRows="3"
  persistentHint
  textAreaGrow
  clearable
  counter
/>

<TInputText
  design="outlined"
  ///
/>

<TInputText
  design="solo"
  ///
/>

export default defineComponent({
  setup() {
    const selected = ref<string>();
    const loading = ref(false);
    const valid = ref(false);

    const field = TInputTextController.create({
      validationMode: "blur",
      onValidate: async ({ value }) => {
        if (!value) {
          return "Username is required";
        }
        const available = await checkUsername(value);
        if (!available) {
          return "Username is not available";
        }
      },
    });

    const checkUsername = async (value: string) => {
      loading.value = true;
      await delayPromise(1500); // fetch from server
      loading.value = false;
      selected.value = value;

      if (value === "tohama") {
        valid.value = true;
        return true;
      }

      valid.value = false;
      return false;
    };

    return () => (
      <>
        <TInputText
          outerPrepend={() => (
            <TIcon
              size="32"
              me="md"
              color={valid.value ? "success" : "danger"}
              icon={valid.value ? "mdi:emoticon-happy-outline" : "mdi:emoticon-sad-outline"}
            />
          )}
          controller={field}
          loading={loading.value}
          readOnly={loading.value}
          design="outlined"
          placeholder="Username"
          hint="Enter an available username (try tohama)"
          prefix="@"
          persistentPlaceholder
          persistentHint
          clearable
          mb
        />
        <TBanner
          icon="mdi:information-variant"
          color={valid.value ? "success" : "danger"}
          design="outlined"
          size="md"
          label={() => {
            if (valid.value) {
              return <TText tint="dark">Hello "{selected.value}", welcome to our app!</TText>;
            }
            return <TText tint="dark">Please enter a valid @username!</TText>;
          }}
        />
      </>
    );
  },
});