import { CodeBlock, ConfigBlock } from "@src/helpers/DocBlocks";
import Text from "./Text";
import HelpIconV3 from "../../UI/Icon/MultiColouredIcons/HelpIconV3";

# Text

> A regular input element where user interacts textually. Adheres to Haptik Design System.

<div
  style={{
    display: "grid",
    gridTemplateColumns: "50% 48%",
    gridColumnGap: "15px",
    marginTop: "3rem"
  }}
>

<CodeBlock title="Themed Text Input">
  <Text themed label="Label" onChange={console.log} />
</CodeBlock>

<CodeBlock title="Default Text Input">
  <Text label="Demo Label" value={"Demo Value"} onChange={console.log} />
</CodeBlock>

</div>

<div style={{ marginBottom: 30, marginTop: 30, border: "1px solid #d5d5d5" }} />

## Configuration

<ConfigBlock of={Text} />

## Examples

#### Disabled

<div
  style={{
    display: "grid",
    gridTemplateColumns: "50% 48%",
    gridColumnGap: "15px",
  }}
>

<CodeBlock title="Themed">
  <Text themed disabled value="Disabled" />
</CodeBlock>

<CodeBlock title="Default">
  <Text value={""} onChange={console.log} disabled />
</CodeBlock>

</div>

<div style={{ marginBottom: 30, marginTop: 30, border: "1px solid #d5d5d5" }} />

#### With Label

<div
  style={{
    display: "grid",
    gridTemplateColumns: "50% 48%",
    gridColumnGap: "15px",
  }}
>

<CodeBlock title="Themed">
  <Text themed onChange={console.log} label="Label Swag! 😎" />
</CodeBlock>

<CodeBlock title="Default">
  <Text label="Demo Label" onChange={console.log} />
</CodeBlock>

</div>

<div style={{ marginBottom: 30, marginTop: 30, border: "1px solid #d5d5d5" }} />

#### With Value

<div
  style={{
    display: "grid",
    gridTemplateColumns: "50% 48%",
    gridColumnGap: "15px",
  }}
>

<CodeBlock title="Themed">
  <Text themed onChange={console.log} value="Value Swag!" />
</CodeBlock>

<CodeBlock title="Default">
  <Text value={"Demo Value"} onChange={console.log} />
</CodeBlock>

</div>

<div style={{ marginBottom: 30, marginTop: 30, border: "1px solid #d5d5d5" }} />

#### Error

<div
  style={{
    display: "grid",
    gridTemplateColumns: "50% 48%",
    gridColumnGap: "15px",
  }}
>

<CodeBlock title="Themed">
  <Text themed onChange={console.log} label="Oh no!" error="Error Swag!" />
</CodeBlock>

<CodeBlock title="Default">
  <Text
    label="Demo Label"
    error={"This is a demo error"}
    onChange={console.log}
  />
</CodeBlock>

</div>

<div style={{ marginBottom: 30, marginTop: 30, border: "1px solid #d5d5d5" }} />

#### Tooltip

<div
  style={{
    display: "grid",
    gridTemplateColumns: "50% 48%",
    gridColumnGap: "15px",
  }}
>
<CodeBlock title="Themed">
  <Text themed tooltip="Awesome tooltip swag!" label="Label" onChange={console.log} />
</CodeBlock>

<CodeBlock title="Default">
  <Text
    prefixClassName="test"
    label="Demo Label"
    value={"Demo Value"}
    onChange={console.log}
    tooltip={"This is a demo tooltip"}
  />
</CodeBlock>

</div>

<div style={{ marginBottom: 30, marginTop: 30, border: "1px solid #d5d5d5" }} />

#### Multiline

<div
  style={{
    display: "grid",
    gridTemplateColumns: "50% 48%",
    gridColumnGap: "15px",
  }}
>

<CodeBlock title="Themed">
  <Text
    themed
    onChange={console.log}
    multiline
    placeholder="I can go long, but will look cooler"
  />
</CodeBlock>

<CodeBlock title="Default">
  <Text onChange={console.log} multiline placeholder="I can go long too" />
</CodeBlock>

</div>

#### Size : Small

<div
  style={{
    display: "grid",
    gridTemplateColumns: "50% 48%",
    gridColumnGap: "15px",
  }}
>

<CodeBlock title="Small themed">
  <Text themed onChange={console.log} label="Small variant" size="small" />
</CodeBlock>

</div>

#### Prefix and Postfix Icon component

<div
  style={{
    display: "grid",
    gridTemplateColumns: "50% 48%",
    gridColumnGap: "15px",
  }}
>

  <CodeBlock title="Themed Input with prefix icon component">
    <Text
      themed
      onChange={console.log}
      label="Themed with prefix"
      prefixIcon={<HelpIconV3 borderWidth={0} />}
      borderWidth={10}
    />
  </CodeBlock>
    <CodeBlock title="Themed Input with postfix icon component">
    <Text
      themed
      onChange={console.log}
      label="Themed with postfix"
      postfixIcon={<HelpIconV3 borderWidth={0} size='big'/>}
      borderWidth={10}
    />
  </CodeBlock>
</div>