import { CodeBlock, ConfigBlock } from "@src/helpers/DocBlocks";
import dayjs from "dayjs";
import InfoIconV4 from "@src/components/UI/Icon/Icons/InfoIconV4";
import Box from "@src/components/UI/Box";
import Text from "@src/components/UI/Text";
import Date from "./Date";

# DateInput

> A clickable UI element with active and hover states. Indicates to the user that it's clickable.

<CodeBlock
  title="Themed Range"
  defaultValue={{ startDate: dayjs(), endDate: dayjs().add(7, "d") }}
>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withRange
      themed
    />
  )}
</CodeBlock>

<CodeBlock defaultValue={dayjs()}>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withTime
    />
  )}
</CodeBlock>

## Configuration

<ConfigBlock of={Date} />

## Examples of Themed Calendar

<CodeBlock title="Themed : Single" defaultValue={dayjs()}>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      themed
    />
  )}
</CodeBlock>

<CodeBlock
  title="Themed Range with Time"
  defaultValue={{
    startDate: dayjs(),
    endDate: dayjs().add(7, "d"),
    startTime: dayjs().startOf("d"),
    endTime: dayjs().endOf("d"),
  }}
>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withRange
      themed
      withThemedRangeTime
    />
  )}
</CodeBlock>

<CodeBlock
  title="Themed Range with compare"
  defaultValue={{
    startDate: dayjs(),
    endDate: dayjs().add(7, "d"),
    startTime: dayjs().startOf("d"),
    endTime: dayjs().endOf("d"),
  }}
>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withRange
      themed
      withComparison
      withThemedRangeTime
    />
  )}
</CodeBlock>

<CodeBlock
  title="Themed Range with Compare and Tooltip"
  defaultValue={{
    startDate: dayjs(),
    endDate: dayjs().add(7, "d"),
    startTime: dayjs().startOf("d"),
    endTime: dayjs().endOf("d"),
  }}
>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withRange
      themed
      withComparison
      withThemedRangeTime
      InfoCard={
        <Box
          backgroundColor="yellow.pastel"
          padding={8}
          width="100%"
          pl={16}
          alignItems="center"
        >
          <InfoIconV4 iconColor="yellow.dark" size="small" mr={8} />
          <Text variant="body.md" color="yellow.dark">
            This is just to test the tooltip.
          </Text>
        </Box>
      }
    />
  )}
</CodeBlock>

<CodeBlock
  title="Themed Range with tooltip"
  defaultValue={{ startDate: dayjs(), endDate: dayjs().add(7, "d") }}
>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withRange
      themed
      InfoCard={
        <Box
          backgroundColor="yellow.pastel"
          padding={8}
          width="100%"
          pl={16}
          alignItems="center"
        >
          <InfoIconV4 iconColor="yellow.dark" size="small" mr={8} />
          <Text variant="body.md" color="yellow.dark">
            This is just to test the tooltip.
          </Text>
        </Box>
      }
    />
  )}
</CodeBlock>

<CodeBlock
  title="Themed Range with minimum & maximum selectable dates"
  defaultValue={{ startDate: dayjs(), endDate: dayjs().add(7, "d") }}
>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withRange
      themed
      maxDate={dayjs().add(7, "d")}
      minDate={dayjs().subtract(30, "d")}
    />
  )}
</CodeBlock>

<CodeBlock
  title="Themed Range : Disabled"
  defaultValue={{ startDate: dayjs(), endDate: dayjs().add(7, "d") }}
>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withRange
      themed
      disabled
    />
  )}
</CodeBlock>

## Examples

<CodeBlock title="Single" defaultValue={dayjs()}>
  {(value, onChange) => (
    <Date label="Select Date" value={value} onChange={onChange} numMonths={2} />
  )}
</CodeBlock>

<CodeBlock title="Single disabled" defaultValue={dayjs()}>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      disabled
    />
  )}
</CodeBlock>

<CodeBlock
  title="Range"
  defaultValue={{ startDate: dayjs(), endDate: dayjs().add(7, "d") }}
>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withRange
    />
  )}
</CodeBlock>

<CodeBlock
  title="Comparison"
  defaultValue={{ startDate: dayjs().subtract(7, "d"), endDate: dayjs() }}
>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withRange
      withComparison
      maxDate={dayjs()}
      comparisonMaxDate={dayjs()}
      position="TOP"
    />
  )}
</CodeBlock>

<CodeBlock
  title="Minimum Selectable Dates"
  defaultValue={{ startDate: dayjs(), endDate: dayjs().add(7, "d") }}
>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withRange
      minDate={dayjs().subtract(30, "d")}
    />
  )}
</CodeBlock>
<CodeBlock
  title="Maximum Selectable Dates"
  defaultValue={{ startDate: dayjs(), endDate: dayjs().add(7, "d") }}
>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withRange
      maxDate={dayjs().add(7, "d")}
      position="TOP"
    />
  )}
</CodeBlock>

<CodeBlock
  title="Minimum & Maximum Selectable Dates"
  defaultValue={{ startDate: dayjs(), endDate: dayjs().add(7, "d") }}
>
  {(value, onChange) => (
    <Date
      label="Select Date"
      value={value}
      onChange={onChange}
      numMonths={2}
      withRange
      maxDate={dayjs().add(7, "d")}
      minDate={dayjs().subtract(30, "d")}
      position="TOP"
    />
  )}
</CodeBlock>