defmodule MoonWeb.Pages.Components.TextInputPage do
  @moduledoc false

  use MoonWeb, :live_view

  alias Moon.Autolayouts.TopToDown
  alias MoonWeb.Components.ExampleAndCode
  alias MoonWeb.Components.Page
  alias Moon.Components.TextInput
  alias Moon.Components.Heading
  alias MoonWeb.Components.ComponentPageDescription
  alias Moon.Autolayouts.LeftToRight
  alias Moon.Components.ErrorTag
  alias Moon.Components.Field
  alias Moon.Components.Form
  alias Moon.Components.Button
  alias Moon.Icon
  alias MoonWeb.Pages.Tutorials.AddDataUsingForm.User
  alias MoonWeb.Components.Table.Table
  alias MoonWeb.Components.Table.Column
  alias MoonWeb.Components.Facing.DeprecationWarning

  data(breadcrumbs, :any,
    default: [
      %{
        to: "#",
        name: "Components"
      },
      %{
        to: "/components/text_input",
        name: "Text Input"
      }
    ]
  )

  data(props_info_array, :list,
    default: [
      %{
        :name => ~c"type",
        :type =>
          ~c"date | datetime-local | email | number | password | search | tel | text | url | time | url",
        :required => ~c"No",
        :default => ~c"text",
        :description => ~c"Different types of input"
      },
      %{
        :name => ~c"size",
        :type => ~c"medium | large | xlarge",
        :required => ~c"-",
        :default => ~c"medium",
        :description => ~c"Size variant (currently only medium | large, with large as default)"
      },
      %{
        :name => ~c"label",
        :type => ~c"string",
        :required => ~c"Yes",
        :default => ~c"-",
        :description => ~c"Required for medium size only"
      },
      %{
        :name => ~c"placeholder",
        :type => ~c"string",
        :required => ~c"No",
        :default => ~c"-",
        :description => ~c"Placeholder for input"
      },
      %{
        :name => ~c"field",
        :type => ~c"atom",
        :required => ~c"Yes",
        :default => ~c"-",
        :description => ~c"Field value for underlying pheonix text input component"
      },
      %{
        :name => ~c"hint_text",
        :type => ~c"slot",
        :required => ~c"No",
        :default => ~c"-",
        :description => ~c"Informative or error message under input"
      },
      %{
        :name => ~c"error",
        :type => ~c"boolean",
        :required => ~c"No",
        :default => ~c"-",
        :description => ~c"Set error state for input"
      },
      %{
        :name => ~c"show_password_text",
        :type => ~c"-",
        :required => ~c"-",
        :default => ~c"-",
        :description =>
          ~c"Only for input type password. Text for toggle button: show/hide password"
      },
      %{
        :name => ~c"background_color",
        :type => ~c"string",
        :required => ~c"No",
        :default => ~c"-",
        :description => ~c"Background color"
      },
      %{
        :name => ~c"id",
        :type => ~c"string",
        :required => ~c"No | required (for password type)",
        :default => ~c"-",
        :description => ~c"Unique id"
      },
      %{
        :name => ~c"use_error_tag",
        :type => ~c"boolean",
        :required => ~c"No",
        :default => ~c"false",
        :description =>
          ~c"Whether to use ErrorTag in place of the Hint text to show error messages. Requires the component to be inside Form and Field components"
      }
    ]
  )

  def render(assigns) do
    ~F"""
    <Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
      <TopToDown>
        <ComponentPageDescription title="Text Input">
          <DeprecationWarning
            name="TextInput"
            href={live_path(MoonWeb.Endpoint, MoonWeb.Pages.Design.Form.InputPage,
              theme_name: @theme_name,
              direction: @direction
            )}
          />
        </ComponentPageDescription>

        <ExampleAndCode id="input_020" title="Sizes">
          <:example>
            <LeftToRight class="justify-between w-full items-end">
              <TextInput label="Medium (Default: md)" placeholder="Placeholder" />
              <TextInput size="lg" label="Large (lg)" placeholder="Placeholder" />
              <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" />
            </LeftToRight>
          </:example>

          <:code>{text_input_020_code()}</:code>
        </ExampleAndCode>

        <Heading size={32} class="mt-16 mb-4">Text Input Icons</Heading>

        <ExampleAndCode id="input_023" title="Icons">
          <:example>
            <TopToDown class="w-full">
              <LeftToRight class="justify-between w-full items-end">
                <TextInput
                  label="Medium (Default: md)"
                  placeholder="Placeholder"
                  type="password"
                  id="txt_password_0_1"
                >
                  <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
                  <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
                </TextInput>
                <TextInput
                  size="lg"
                  label="Large (lg)"
                  placeholder="Placeholder"
                  type="password"
                  id="txt_password_0_2"
                >
                  <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
                  <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
                </TextInput>
                <TextInput
                  size="xl"
                  label="Xlarge (xl)"
                  placeholder="Placeholder"
                  type="password"
                  id="txt_password_0_3"
                >
                  <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
                  <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
                </TextInput>
              </LeftToRight>

              <LeftToRight class="justify-between w-full items-end">
                <TextInput label="Medium (Default: md)" placeholder="Placeholder">
                  <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
                  <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
                </TextInput>
                <TextInput size="lg" label="Large (lg)" placeholder="Placeholder">
                  <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
                  <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
                </TextInput>
                <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder">
                  <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
                  <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
                </TextInput>
              </LeftToRight>

              <LeftToRight class="justify-between w-full items-end">
                <TextInput label="Medium (Default: md)" placeholder="Placeholder">
                  <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
                  <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
                  <:hint_text_slot>Informative message holder</:hint_text_slot>
                </TextInput>
                <TextInput size="lg" label="Large (lg)" placeholder="Placeholder">
                  <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
                  <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
                  <:hint_text_slot>Informative message holder</:hint_text_slot>
                </TextInput>
                <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder">
                  <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
                  <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
                  <:hint_text_slot>Informative message holder</:hint_text_slot>
                </TextInput>
              </LeftToRight>

              <LeftToRight class="justify-between w-full items-end">
                <TextInput label="Medium (Default: md)" placeholder="Placeholder">
                  <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
                  <:right_icon_slot>
                    <Button size="xs">xsmall<Icon name="controls-plus" /></Button>
                  </:right_icon_slot>
                </TextInput>
                <TextInput size="lg" label="Large (lg)" placeholder="Placeholder">
                  <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
                  <:right_icon_slot>
                    <Button size="sm">small<Icon name="controls-plus" /></Button>
                  </:right_icon_slot>
                </TextInput>
                <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder">
                  <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
                  <:right_icon_slot>
                    <Button>medium<Icon name="controls-plus" /></Button>
                  </:right_icon_slot>
                </TextInput>
              </LeftToRight>
            </TopToDown>
          </:example>

          <:code>{text_input_023_code()}</:code>
        </ExampleAndCode>

        <Heading size={32} class="mt-16 mb-4">Text Input Types</Heading>

        <ExampleAndCode id="input_010" title="Number">
          <:example>
            <LeftToRight class="justify-between w-full items-end">
              <TextInput type="number" size="md" label="Medium (Default: md)" placeholder="e.g. 1234" />
              <TextInput type="number" size="lg" label="Large (lg)" placeholder="e.g. 1234" />
              <TextInput type="number" size="xl" label="Xlarge (xl)" placeholder="e.g. 1234" />
            </LeftToRight>
          </:example>

          <:code>{text_input_010_code()}</:code>
        </ExampleAndCode>

        <ExampleAndCode id="input_009" title="Date">
          <:example>
            <LeftToRight class="justify-between w-full items-end">
              <TextInput type="date" size="md" label="Medium (Default: md)" placeholder="Placeholder" />
              <TextInput type="date" size="lg" label="Large (lg)" placeholder="Placeholder" />
              <TextInput type="date" size="xl" label="Xlarge (xl)" placeholder="Placeholder" />
            </LeftToRight>
          </:example>

          <:code>{text_input_009_code()}</:code>
        </ExampleAndCode>

        <ExampleAndCode id="input_008" title="Time">
          <:example>
            <LeftToRight class="justify-between w-full items-end">
              <TextInput type="time" size="md" label="Medium (Default: md)" placeholder="Placeholder" />
              <TextInput type="time" size="lg" label="Large (lg)" placeholder="Placeholder" />
              <TextInput type="time" size="xl" label="Xlarge (xl)" placeholder="Placeholder" />
            </LeftToRight>
          </:example>

          <:code>{text_input_008_code()}</:code>
        </ExampleAndCode>

        <ExampleAndCode id="input_007" title="Date Time">
          <:example>
            <LeftToRight class="justify-between w-full items-end">
              <TextInput
                type="datetime-local"
                size="md"
                label="Medium (Default: md)"
                placeholder="Placeholder"
              />
              <TextInput type="datetime-local" size="lg" label="Large (lg)" placeholder="Placeholder" />
              <TextInput type="datetime-local" size="xl" label="Xlarge (xl)" placeholder="Placeholder" />
            </LeftToRight>
          </:example>

          <:code>{text_input_007_code()}</:code>
        </ExampleAndCode>

        <ExampleAndCode id="input_006" title="Email">
          <:example>
            <LeftToRight class="justify-between w-full items-end">
              <TextInput
                type="email"
                size="md"
                label="Medium (Default: md)"
                placeholder="e.g. jake.weary@sportsbet.io"
              />
              <TextInput type="email" size="lg" label="Large (lg)" placeholder="e.g. jake.weary@sportsbet.io" />
              <TextInput
                type="email"
                size="xl"
                label="Xlarge (xl)"
                placeholder="e.g. jake.weary@sportsbet.io"
              />
            </LeftToRight>
          </:example>

          <:code>{text_input_006_code()}</:code>
        </ExampleAndCode>

        <ExampleAndCode id="input_005" title="Password">
          <:example>
            <LeftToRight class="justify-between w-full items-end">
              <TextInput
                id="txt_password_1"
                type="password"
                size="md"
                label="Medium (Default: md)"
                placeholder="Password"
              />
              <TextInput
                id="txt_password_2"
                type="password"
                size="lg"
                label="Large (lg)"
                placeholder="Password"
              />
              <TextInput
                id="txt_password_3"
                type="password"
                size="xl"
                label="Xlarge (xl)"
                placeholder="Password"
              />
            </LeftToRight>
          </:example>

          <:code>{text_input_005_code()}</:code>
        </ExampleAndCode>

        <ExampleAndCode id="input_004" title="Search">
          <:example>
            <LeftToRight class="justify-between w-full items-end">
              <TextInput type="search" size="md" label="Medium (Default: md)" placeholder="e.g. happiness" />
              <TextInput type="search" size="lg" label="Large (lg)" placeholder="e.g. health" />
              <TextInput type="search" size="xl" label="Xlarge (xl)" placeholder="e.g. money" />
            </LeftToRight>
          </:example>

          <:code>{text_input_004_code()}</:code>
        </ExampleAndCode>

        <Heading size={32} class="mt-16 mb-4">Text input attributes</Heading>

        <ExampleAndCode id="input_20" title="Disabled">
          <:example>
            <LeftToRight class="justify-between w-full items-end">
              <TextInput label="Medium (Default: md)" placeholder="Placeholder" disabled />
              <TextInput size="lg" label="Large (lg)" placeholder="Placeholder" disabled />
              <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" disabled />
            </LeftToRight>
          </:example>

          <:code>{text_input_20_code()}</:code>
        </ExampleAndCode>

        <ExampleAndCode id="input_30" title="Error">
          <:example>
            <LeftToRight class="justify-between w-full items-end">
              <TextInput label="Medium (Default: md)" placeholder="Placeholder" is_error>
                <:hint_text_slot>Informative message holder</:hint_text_slot>
              </TextInput>
              <TextInput size="lg" label="Large (lg)" placeholder="Placeholder" is_error>
                <:hint_text_slot>Informative message holder</:hint_text_slot>
              </TextInput>
              <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" is_error>
                <:hint_text_slot>Informative message holder</:hint_text_slot>
              </TextInput>
            </LeftToRight>
          </:example>

          <:code>{text_input_30_code()}</:code>
        </ExampleAndCode>

        <ExampleAndCode id="input_40" title="Readonly">
          <:example>
            <LeftToRight class="justify-between w-full items-end">
              <TextInput
                label="Medium (Default: md)"
                value="Read only text"
                placeholder="Placeholder"
                readonly
              />
              <TextInput
                size="lg"
                label="Large (lg)"
                value="Read only text"
                placeholder="Placeholder"
                readonly
              />
              <TextInput
                size="xl"
                label="Xlarge (xl)"
                value="Read only text"
                placeholder="Placeholder"
                readonly
              />
            </LeftToRight>
          </:example>

          <:code>{text_input_40_code()}</:code>
        </ExampleAndCode>

        <ExampleAndCode id="input_50" title="Size RTL">
          <:example>
            <LeftToRight class="justify-between w-full items-end" dir="rtl">
              <TextInput label="Medium (Default: md)" placeholder="Placeholder" />
              <TextInput size="lg" label="Large (lg)" placeholder="Placeholder" />
              <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" />
            </LeftToRight>
          </:example>

          <:code>{text_input_50_code()}</:code>
        </ExampleAndCode>

        <ExampleAndCode id="input_60" title="Without label">
          <:example>
            <LeftToRight class="justify-between w-full items-end" dir="rtl">
              <TextInput placeholder="Placeholder" />
              <TextInput size="lg" placeholder="Placeholder" />
              <TextInput size="xl" placeholder="Placeholder" />
            </LeftToRight>
          </:example>

          <:code>{text_input_60_code()}</:code>
        </ExampleAndCode>

        <ExampleAndCode id="input_70" title="Hint Text">
          <:example>
            <LeftToRight class="justify-between w-full items-end">
              <TextInput placeholder="Placeholder" label="Medium (Default: md)">
                <:hint_text_slot>Informative message holder</:hint_text_slot>
              </TextInput>
              <TextInput size="lg" placeholder="Placeholder" label="Large (lg)">
                <:hint_text_slot>Informative message holder</:hint_text_slot>
              </TextInput>
              <TextInput size="xl" placeholder="Placeholder" label="XLarge (xl)">
                <:hint_text_slot>Informative message holder</:hint_text_slot>
              </TextInput>
            </LeftToRight>
          </:example>

          <:code>{text_input_70_code()}</:code>
        </ExampleAndCode>

        <ExampleAndCode id="input_80" title="Input with background color">
          <:example>
            <LeftToRight class="justify-between w-full items-end">
              <TextInput placeholder="Placeholder" label="Medium (Default: md)" background_color="goku">
                <:hint_text_slot>Informative message holder</:hint_text_slot>
              </TextInput>
              <TextInput size="lg" placeholder="Placeholder" label="Large (lg)" background_color="goku">
                <:hint_text_slot>Informative message holder</:hint_text_slot>
              </TextInput>
              <TextInput size="xl" placeholder="Placeholder" label="XLarge (xl)" background_color="goku">
                <:hint_text_slot>Informative message holder</:hint_text_slot>
              </TextInput>
            </LeftToRight>
          </:example>

          <:code>{text_input_70_code()}</:code>
        </ExampleAndCode>

        <ExampleAndCode id="input_90" title="Form example">
          <:example>
            <Form
              for={@user_changeset}
              change="register_form_update"
              submit="register_form_submit"
              autocomplete="off"
            >
              <TopToDown>
                <Field name={:username}>
                  <TextInput label="Username" placeholder="Username" />
                  <ErrorTag />
                </Field>
                <Field name={:email}>
                  <TextInput
                    label="Email"
                    placeholder="Email"
                    type="email"
                    disabled={!get_has_valid_username(@user_changeset)}
                  />
                  <ErrorTag />
                </Field>
                <Field name={:password}>
                  <TextInput id="password" label="Password" placeholder="Password" type="password" use_error_tag />
                </Field>
                <div class="pt-4">
                  <Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
                </div>
              </TopToDown>
            </Form>
          </:example>

          <:code>{text_input_90_code()}</:code>

          <:state>{text_input_90_state(assigns)}</:state>
        </ExampleAndCode>

        <div>
          <div class="text-bulma items-center text-moon-20 font-normal my-4">Text Input Props</div>
          <Table items={item <- @props_info_array}>
            <Column name="name" label="Name" is_row_header>
              {item.name}
            </Column>
            <Column name="type" label="Type">
              {item.type}
            </Column>
            <Column name="required" label="Required">
              {item.required}
            </Column>
            <Column name="default" label="Default">
              {item.default}
            </Column>
            <Column name="description" label="Description">
              {item.description}
            </Column>
          </Table>
        </div>
      </TopToDown>
    </Page>
    """
  end

  def text_input_020_code do
    """
    <TextInput label="Medium (Default: md)" />
    <TextInput size="lg" label="Large (lg)" />
    <TextInput size="xl" label="Xlarge (xl)" />
    """
  end

  def text_input_023_code do
    """
    <TopToDown class="w-full">
      <LeftToRight class="justify-between w-full items-end">
        <TextInput
          label="Medium (Default: md)"
          placeholder="Placeholder"
          type="password"
          id="txt_password_0_1"
        >
          <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
          <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
        </TextInput>
        <TextInput
          size="lg"
          label="Large (lg)"
          placeholder="Placeholder"
          type="password"
          id="txt_password_0_2"
        >
          <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
          <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
        </TextInput>
        <TextInput
          size="xl"
          label="Xlarge (xl)"
          placeholder="Placeholder"
          type="password"
          id="txt_password_0_3"
        >
          <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
          <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
        </TextInput>
      </LeftToRight>

      <LeftToRight class="justify-between w-full items-end">
        <TextInput label="Medium (Default: md)" placeholder="Placeholder">
          <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
          <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
        </TextInput>
        <TextInput size="lg" label="Large (lg)" placeholder="Placeholder">
          <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
          <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
        </TextInput>
        <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder">
          <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
          <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
        </TextInput>
      </LeftToRight>

      <LeftToRight class="justify-between w-full items-end">
        <TextInput label="Medium (Default: md)" placeholder="Placeholder">
          <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
          <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
          <:hint_text_slot>Informative message holder</:hint_text_slot>
        </TextInput>
        <TextInput size="lg" label="Large (lg)" placeholder="Placeholder">
          <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
          <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
          <:hint_text_slot>Informative message holder</:hint_text_slot>
        </TextInput>
        <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder">
          <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
          <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
          <:hint_text_slot>Informative message holder</:hint_text_slot>
        </TextInput>
      </LeftToRight>
    </TopToDown>
    """
  end

  def text_input_010_code do
    """
    <TextInput
      type="number"
      size="md"
      label="Medium (Default: md)"
      placeholder="e.g. 1234"
    />
    <TextInput
      type="number"
      size="lg"
      label="Large (lg)"
      placeholder="e.g. 1234"
    />
    <TextInput
      type="number"
      size="xl"
      label="Xlarge (xl)"
      placeholder="e.g. 1234"
    />
    """
  end

  def text_input_009_code do
    """
    <TextInput
      type="date"
      size="md"
      label="Medium (Default: md)"
      placeholder="Placeholder"
    />
    <TextInput
      type="date"
      size="lg"
      label="Large (lg)"
      placeholder="Placeholder"
    />
    <TextInput
      type="date"
      size="xl"
      label="Xlarge (xl)"
      placeholder="Placeholder"
    />
    """
  end

  def text_input_008_code do
    """
    <TextInput
      type="time"
      size="md"
      label="Medium (Default: md)"
      placeholder="Placeholder"
    />
    <TextInput
      type="time"
      size="lg"
      label="Large (lg)"
      placeholder="Placeholder"
    />
    <TextInput
      type="time"
      size="xl"
      label="Xlarge (xl)"
      placeholder="Placeholder"
    />
    """
  end

  def text_input_007_code do
    """
    <TextInput
      type="datetime-local"
      size="md"
      label="Medium (Default: md)"
      placeholder="Placeholder"
    />
    <TextInput
      type="datetime-local"
      size="lg"
      label="Large (lg)"
      placeholder="Placeholder"
    />
    <TextInput
      type="datetime-local"
      size="xl"
      label="Xlarge (xl)"
      placeholder="Placeholder"
    />
    """
  end

  def text_input_006_code do
    """
    <TextInput
      type="email"
      size="md"
      label="Medium (Default: md)"
      placeholder="e.g. jake.weary@sportsbet.io"
    />
    <TextInput
      type="email"
      size="lg"
      label="Large (lg)"
      placeholder="e.g. jake.weary@sportsbet.io"
    />
    <TextInput
      type="email"
      size="xl"
      label="Xlarge (xl)"
      placeholder="e.g. jake.weary@sportsbet.io"
    />
    """
  end

  def text_input_005_code do
    """
    <TextInput
      id="txt_password_1"
      type="password"
      size="md"
      label="Medium (Default: md)"
      placeholder="Password"
    />
    <TextInput
      id="txt_password_2"
      type="password"
      size="lg"
      label="Large (lg)"
      placeholder="Password"
    />
    <TextInput
      id="txt_password_3"
      type="password"
      size="xl"
      label="Xlarge (xl)"
      placeholder="Password"
    />
    """
  end

  def text_input_004_code do
    """
    <TextInput
      type="search"
      size="md"
      label="Medium (Default: md)"
      placeholder="e.g. happiness"
    />
    <TextInput
      type="search"
      size="lg"
      label="Large (lg)"
      placeholder="e.g. health"
    />
    <TextInput
      type="search"
      size="xl"
      label="Xlarge (xl)"
      placeholder="e.g. money"
    />
    """
  end

  def text_input_20_code do
    """
    <TextInput label="Medium (Default: md)" placeholder="Placeholder" disabled/>
    <TextInput size="lg" label="Large (lg)" placeholder="Placeholder" disabled/>
    <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" disabled/>
    """
  end

  def text_input_30_code do
    """
    <TextInput label="Medium (Default: md)" placeholder="Placeholder" is_error>
      <:hint_text_slot>Informative message holder</:hint_text_slot>
    </TextInput>
    <TextInput size="lg" label="Large (lg)" placeholder="Placeholder" is_error>
      <:hint_text_slot>Informative message holder</:hint_text_slot>
    </TextInput>
      <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" is_error>
      <:hint_text_slot>Informative message holder</:hint_text_slot>
    </TextInput>
    """
  end

  def text_input_40_code do
    """
    <TextInput label="Medium (Default: md)" placeholder="Placeholder" readonly/>
    <TextInput size="lg" label="Large (lg)" placeholder="Placeholder" readonly/>
    <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" readonly/>
    """
  end

  def text_input_50_code do
    """
    <TextInput label="Medium (Default: md)" placeholder="Placeholder" dir="rtl"/>
    <TextInput size="lg" label="Large (lg)" placeholder="Placeholder" dir="rtl"/>
    <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" dir="rtl"/>
    """
  end

  def text_input_60_code do
    """
    <TextInput (Default: md)" placeholder="Placeholder" dir="rtl"/>
    <TextInput size="lg" placeholder="Placeholder" dir="rtl"/>
    <TextInput size="xl" placeholder="Placeholder" dir="rtl"/>
    """
  end

  def text_input_70_code do
    """
    <TextInput placeholder="Placeholder" label="Medium (Default: md)">
      <:hint_text_slot>Informative message holder</:hint_text_slot>
    </TextInput>
    <TextInput size="lg" placeholder="Placeholder" label="Large (lg)">
      <:hint_text_slot>Informative message holder</:hint_text_slot>
    </TextInput>
    <TextInput size="xl" placeholder="Placeholder" label="XLarge (xl)">
      <:hint_text_slot>Informative message holder</:hint_text_slot>
    </TextInput>
    """
  end

  def text_input_80_code do
    """
    <TextInput placeholder="Placeholder" label="Medium (Default: md)" background_color="goku">
      <:hint_text_slot>Informative message holder</:hint_text_slot>
    </TextInput>
    <TextInput size="lg" placeholder="Placeholder" label="Large (lg)" background_color="goku">
      <:hint_text_slot>Informative message holder</:hint_text_slot>
    </TextInput>
    <TextInput size="xl" placeholder="Placeholder" label="XLarge (xl)" background_color="goku">
      <:hint_text_slot>Informative message holder</:hint_text_slot>
    </TextInput>
    """
  end

  def text_input_90_code do
    """
    <Form
      for={@user_changeset}
      change="register_form_update"
      submit="register_form_submit"
      autocomplete="off"
    >
      <TopToDown>
        <Field name={:username}>
          <TextInput label="Username" placeholder="Username" />
          <ErrorTag />
        </Field>
        <Field name={:email}>
          <TextInput
            label="Email"
            placeholder="Email"
            type="email"
            disabled={!get_has_valid_username(@user_changeset)}
          />
          <ErrorTag />
        </Field>
        <Field name={:password}>
          <TextInput id="password" label="Password" placeholder="Password" type="password" use_error_tag/>
        </Field>
        <div class="pt-4">
          <Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
        </div>
      </TopToDown>
    </Form>
    """
  end

  def text_input_90_state(assigns) do
    ~F"""
    @user_changeset = {inspect(@user_changeset, pretty: true)}
    @user = {inspect(@user, pretty: true)}
    """
  end

  def mount(_params, _session, socket) do
    user = %User{}

    user_changeset = User.changeset(user, %{})

    {:ok,
     assign(socket,
       user: user,
       user_changeset: user_changeset
     )}
  end

  def handle_params(_params, uri, socket) do
    {:noreply, assign(socket, uri: uri)}
  end

  def get_has_valid_username(user_changeset) do
    !Keyword.has_key?(user_changeset.errors, :username)
  end

  def handle_event("register_form_update", params, socket) do
    user_changeset = User.changeset(socket.assigns.user, params["user"])

    {:noreply, assign(socket, user_changeset: user_changeset)}
  end

  def handle_event("register_form_submit", params, socket) do
    user_changeset =
      User.changeset(socket.assigns.user, params["user"]) |> Map.merge(%{action: :insert})

    {:noreply, assign(socket, user_changeset: user_changeset)}
  end
end
