import { RtFrame } from '@dpa/react-frame-intro';
import { RtFormFieldText } from '@dpa/react-form-field-text';
import { useState } from 'react';
import { SparkTypographyIcon } from '@dpa/react-typography-icons';
import { RtSymbolAction } from '@dpa/react-symbol-action';
import { TestDetailsButton } from './test-details-button';
import { RtGrid } from '@dpa/react-grid';

function FormFieldBlock() {
  const [text, setText] = useState('hello');

  function onChange(e: any) {
    setText(e.value);
  }

  return (
    <RtFrame
      as="div"
      surface="foundation-tint"
      modifier="mono"
      typographyScheme="primary"
      use="tertiary"
      style={{
        width: 700,
        padding: 10,
        margin: '50px auto',
        display: 'flex',
        flexDirection: 'column',
        gap: '10px',
      }}
    >
      <RtFormFieldText
        label="Normal MD"
        details="details"
        type="text"
        leadingIcon={SparkTypographyIcon}
        trailingIcon={SparkTypographyIcon}
        leadingSlot={<div>slot</div>}
        trailingSlot={<div>slot</div>}
        trailingAction={RtSymbolAction.Info}
        trailingActionSymbol="info-circle-fill"
        prefix="Prefix"
        suffix="Suffix"
        placeholder="Placeholder"
        ui="normal"
        size="md"
        value={text}
        clearable="persistent"
        use="neutral"
        modifier="mono"
        onChange={(e) => setText(e.value)}
        counter
        maxLength={10}
        trailingActionTooltipHint="Hello ?))"
      />

      <RtFrame breakpointMd="xs">
        <RtFormFieldText
          label="Space Large width very very very vert long label to show how input works I need more words"
          details="details"
          leadingIcon={SparkTypographyIcon}
          trailingIcon={SparkTypographyIcon}
          leadingSlot={<div>slot</div>}
          trailingSlot={<div>slot</div>}
          trailingAction={RtSymbolAction.Info}
          trailingActionSymbol="info-circle-fill"
          prefix="Prefix"
          suffix="Suffix"
          placeholder="Placeholder"
          ui="space"
          size="lg"
          clearable="persistent"
          value={text}
          use="neutral"
          onChange={(e) => setText(e.value)}
          counter
          maxLength={999}
        />
      </RtFrame>

      <RtFormFieldText
        label="Ambulant Label Large"
        details="details"
        leadingIcon={SparkTypographyIcon}
        trailingIcon={SparkTypographyIcon}
        leadingSlot={<div>slot</div>}
        trailingSlot={<div>slot</div>}
        trailingAction={RtSymbolAction.Info}
        trailingActionSymbol="info-circle-fill"
        suffix="Suffix"
        prefix="Prefix"
        placeholder="Placeholder"
        ui="ambulant-label"
        size="lg"
        value={text}
        phDisplay="persistent"
        clearable="persistent"
        use="neutral"
        onChange={(e) => setText(e.value)}
        counter
        maxLength={999}
      />

      <RtFormFieldText
        label="Ambulant Label Large Width very very very vert long label to show how input works with"
        details="details"
        leadingIcon={SparkTypographyIcon}
        trailingIcon={SparkTypographyIcon}
        leadingSlot={<div>slot</div>}
        trailingSlot={
          <div>
            <TestDetailsButton />
          </div>
        }
        trailingAction={RtSymbolAction.Info}
        trailingActionSymbol="info-circle-fill"
        placeholder="Placeholder"
        ui="ambulant-label"
        size="lg"
        value={text}
        phDisplay="hidden"
        clearable="persistent"
        use="neutral"
        onChange={(e) => setText(e.value)}
        counter
        maxLength={999}
        detailsSlot={<TestDetailsButton />}
        isDetailsSlotGridChild
      />

      <RtFormFieldText
        label="Normal Medium"
        details="details"
        leadingIcon={SparkTypographyIcon}
        trailingIcon={SparkTypographyIcon}
        leadingSlot={<div>slot</div>}
        trailingSlot={<div>slot</div>}
        trailingAction={RtSymbolAction.Info}
        trailingActionSymbol="info-circle-fill"
        placeholder="Placeholder 123 123 123 123"
        ui="normal"
        required
        size="md"
        value={text}
        clearable="persistent"
        ariaLabel="hello"
        use="error"
        onChange={onChange}
        counter
        maxLength={999}
        hint="Hint"
        width="250px"
      />

      <RtGrid direction="vertical">
        <div>
          <RtFormFieldText
            use="neutral"
            placeholder="Placeholder"
            ui="normal"
            size="md"
            value={text}
            clearable="persistent"
            onChange={onChange}
            width="100px"
          />
        </div>
        <div style={{ width: '100px' }}>
          <RtFormFieldText
            use="neutral"
            placeholder=""
            ui="normal"
            size="md"
            value={text}
            clearable="hidden"
            onChange={onChange}
            width="100px"
          />
        </div>

        <RtFormFieldText
          use="neutral"
          placeholder=""
          ui="normal"
          size="md"
          value={text}
          clearable="hidden"
          onChange={onChange}
          width="100px"
        />
      </RtGrid>

      <div style={{ display: 'flex', width: '100px' }}>
        <input type="text" style={{ flexGrow: '1', minWidth: '0px' }} />
        <button>x</button>
      </div>
    </RtFrame>
  );
}

export function FormFieldTextPage() {
  return (
    <div>
      <div dir="ltr">
        <FormFieldBlock />
      </div>

      <div dir="rtl">
        <FormFieldBlock />
      </div>
    </div>
  );
}