'use client';
import React from 'react';
import { css, styled } from 'styled-components';
import { BodyText } from '~/components/BodyText';
import { Button } from '~/components/Button';
import { Checkbox } from '~/components/Checkbox';
import { Chip } from '~/components/Chip';
import { ColorSystemContainer } from '~/components/ColorSystemContainer';
import { DataText } from '~/components/DataText';
import { DisplayText } from '~/components/DisplayText';
import { HeadingText } from '~/components/HeadingText';
import { IconFlash } from '~/components/Icon';
import { RadioButton } from '~/components/Radio';
import { Select } from '~/components/Select/Select';
import { SpacerWithCss } from '~/components/Spacer';
import { Stack } from '~/components/Stack';
import { TextInput } from '~/components/TextInput';
import { TextLink } from '~/components/TextLink';
import { Toggle } from '~/components/Toggle';
import { tokens } from '~/tokens';
const ipsum = [
    'Sunt cupidatat labore et ullamco est esse do minim consectetur. Aliquip exercitation anim occaecat consequat do enim nulla veniam in exercitation ad eu ea fugiat. Velit est laborum eu ipsum tempor.',
    'Minim cillum ad laborum minim excepteur pariatur duis ut eu et adipisicing dolore commodo. Cillum ipsum cupidatat incididunt ea amet id anim labore do officia dolor minim. Laboris irure labore incididunt irure qui consequat. Cillum duis anim excepteur exercitation cupidatat commodo aliquip consequat incididunt ut aliqua incididunt ut laboris. Officia ea nostrud veniam irure pariatur. Ad magna eiusmod adipisicing ipsum amet nostrud minim incididunt aliquip sint qui dolor qui.',
    'Nulla culpa id incididunt fugiat non minim qui do et. Ut nisi elit sit anim magna occaecat officia. Consectetur est velit sit sunt ex tempor in velit irure officia. Et id nostrud esse aliquip est eiusmod irure irure laborum fugiat.',
    'Voluptate non nisi aliquip do ipsum labore nisi dolore in veniam. Exercitation cupidatat in consequat consequat nulla do consectetur quis et sit eiusmod. Consectetur cupidatat officia enim sunt occaecat exercitation dolor sint occaecat culpa. Laborum occaecat culpa occaecat deserunt ex deserunt ex excepteur consequat officia.',
    'Proident amet exercitation velit nulla exercitation sint magna magna et anim nisi elit eu qui. Aliquip in mollit mollit ut sint consequat enim amet. Proident nisi cupidatat elit fugiat enim sint in cupidatat aliqua qui ex pariatur. Esse officia elit ipsum ex tempor excepteur qui.',
    'Amet voluptate cillum aliqua ut irure mollit elit aliquip incididunt esse in voluptate reprehenderit est. Tempor adipisicing esse nulla occaecat do veniam. Reprehenderit nisi aliqua est sint deserunt. Velit magna et sunt veniam aute irure ex consequat occaecat deserunt.',
    'Do aliqua magna fugiat ut aliquip tempor proident mollit veniam veniam anim. Minim elit pariatur reprehenderit cillum quis aute ex sit in sunt tempor id exercitation excepteur. Aliquip deserunt nisi ipsum sint do adipisicing veniam magna qui ullamco. Nostrud velit aliqua officia duis eu non irure est laboris do.',
    'Eiusmod laborum nulla veniam tempor id sint cupidatat cillum. Aute consectetur fugiat ea occaecat voluptate proident consectetur. Adipisicing ea laborum aliquip aute cupidatat adipisicing sunt pariatur irure ipsum pariatur. Consequat in elit excepteur cillum nulla est labore adipisicing occaecat cillum. Velit ad ea et dolore in fugiat fugiat officia pariatur non excepteur. Cupidatat proident adipisicing irure consequat ipsum incididunt ea.',
];
function getIpsum(i, words) {
    const res = ipsum[i % ipsum.length];
    return words !== undefined ? res.split(' ').splice(0, words).join(' ') : res;
}
const Group = ({ title, children }) => (<div id={title.toLowerCase().replace(/ /g, '-')}>
    <SpacerWithCss css={css `
        background-color: ${tokens.global.bg.base.default};
        border: 1px solid ${tokens.global.border.muted.default};
      `} p={tokens.global.space.x24}>
      <Stack gap={tokens.global.space.x16}>
        <BodyText as="h2">
          <TextLink href={'#' + title.toLowerCase().replace(/ /g, '-')}>
            <strong>{title}</strong>
          </TextLink>
        </BodyText>
        <Stack gap={tokens.global.space.x16}>{children}</Stack>
      </Stack>
    </SpacerWithCss>
  </div>);
function valuesToKey(values) {
    return JSON.stringify(values, null, 2)
        .replace(/"/g, '')
        .replace(/,/g, ', ')
        .replace(/:/g, ': ')
        .replace(/{/g, '')
        .replace(/}/g, '');
}
// TODO (legacied @typescript-eslint/no-shadow)
// This failure is legacied in and should be updated. DO NOT COPY.
// eslint-disable-next-line @typescript-eslint/no-shadow
const nameSize = (nameSize) => {
    switch (nameSize) {
        case 'medium':
            return '280px';
        case 'large':
            return '400px';
        default:
            return '160px';
    }
};
const ExampleContainer = styled.div `
  display: grid;
  grid-template-columns: ${(props) => nameSize(props.nameSize)} 1fr;
  gap: 1em;
`;
// TODO (legacied @typescript-eslint/no-shadow)
// This failure is legacied in and should be updated. DO NOT COPY.
// eslint-disable-next-line @typescript-eslint/no-shadow
const Example = ({ nameSize, name, children }) => (<ExampleContainer nameSize={nameSize}>
    <BodyText size="sm">
      {name.split(',').map((value) => (<div key={value}>{value}</div>))}
    </BodyText>
    <div>{children}</div>
  </ExampleContainer>);
export function KitchenSink({ color: inputColor = 'reset' }) {
    const render = (<Stack gap={tokens.global.space.x16}>
      <Group title="DisplayText">
        {[{ size: 'xxxl' }, { size: 'xxl' }, { size: 'xl' }, { size: 'lg' }, { size: 'md' }].map((values, i) => {
            const { size } = values;
            const key = valuesToKey(values);
            return (<Example key={key} name={key}>
              <DisplayText size={size}>{getIpsum(i, 8)}</DisplayText>
            </Example>);
        })}
      </Group>

      <Group title="HeadingText">
        {[
            { size: 'xl' },
            { size: 'lg' },
            { size: 'md' },
            { size: 'sm' },
            { size: 'xs' },
            { size: 'xs', color: tokens.global.content.muted.default },
            { size: 'md', color: tokens.global.content.primary.default },
            { size: 'md', color: tokens.global.primary.surfaceMuted.default },
        ].map((values, i) => {
            const { color, size } = values;
            const key = valuesToKey(values);
            return (<Example key={key} name={key}>
              <HeadingText as="h2" color={color} size={size}>
                {getIpsum(i, 8)}
              </HeadingText>
            </Example>);
        })}
      </Group>

      <Group title="BodyText">
        {[
            { size: 'lg' },
            { size: 'md' },
            { size: 'sm' },
            { size: 'md', color: tokens.global.content.muted.default },
        ].map((values, i) => {
            const { color, size } = values;
            const key = valuesToKey(values);
            return (<Example key={key} name={key}>
              <BodyText as="h2" color={color} size={size}>
                {getIpsum(i, 4)} <strong>{getIpsum(i + 1, 4)}</strong> {getIpsum(i + 2, 4)}
              </BodyText>
            </Example>);
        })}
      </Group>

      <Group title="DataText">
        {[{ size: 'lg' }, { size: 'md' }, { size: 'sm' }].map((values) => {
            const { size } = values;
            const key = valuesToKey(values);
            return (<Example key={key} name={key}>
              <DataText variant="body" as="h2" size={size}>
                0123456789
              </DataText>
            </Example>);
        })}
      </Group>

      <Group title="Highlighted Icon">
        {[
            {
                highlightColor: tokens.global.rich.surfaceAlt.default,
                color: tokens.global.rich.regular.default,
            },
            {
                highlightColor: tokens.global.primary.surfaceMuted.default,
                color: tokens.global.primary.onSurfaceMuted.default,
            },
            {
                highlightColor: tokens.global.primary.surfaceMuted.default,
                color: tokens.global.primary.onSurfaceMuted.default,
            },
            {
                highlightColor: tokens.global.primary.surfaceSubtle.default,
                color: tokens.global.primary.onSurfaceSubtle.default,
            },
        ].map((values) => {
            const { highlightColor, color: iconColor } = values;
            const key = valuesToKey(values);
            return (<Example key={key} name={key} nameSize="large">
              <IconFlash highlight highlightColor={highlightColor} color={iconColor}/>
            </Example>);
        })}
      </Group>

      <Group title="Chip">
        {[
            { variant: 'primary' },
            { variant: 'secondary' },
            { variant: 'tertiary' },
            { variant: 'warning' },
            { variant: 'critical' },
            { variant: 'insetBlack' },
            { variant: 'insetWhite' },
        ].map((values, i) => {
            const { variant } = values;
            const key = valuesToKey(values);
            return (<Example key={key} name={key}>
              <Chip variant={variant}>{getIpsum(i, 3)}</Chip>
            </Example>);
        })}
      </Group>

      <Group title="Button">
        {[
            { variant: 'primary' },
            { variant: 'secondary' },
            { variant: 'tertiary' },
            { variant: 'critical' },
            { variant: 'insetBlack' },
            { variant: 'insetWhite' },
            { disabled: true, variant: 'primary' },
            { disabled: true, variant: 'secondary' },
            { disabled: true, variant: 'tertiary' },
            { disabled: true, variant: 'critical' },
            { disabled: true, variant: 'insetBlack' },
            { disabled: true, variant: 'insetWhite' },
        ].map((values, i) => {
            const { variant, disabled } = values;
            const key = valuesToKey(values);
            return (<Example key={key} name={key}>
              <Button disabled={disabled} variant={variant}>
                {getIpsum(i, 4)}
              </Button>
            </Example>);
        })}
      </Group>

      <Group title="TextLink">
        {[{ variant: 'primary' }, { variant: 'muted' }, { variant: 'success' }, { variant: 'critical' }].map((values, i) => {
            const { variant } = values;
            const key = valuesToKey(values);
            return (<Example key={key} name={key}>
                <TextLink href="#" variant={variant}>
                  {getIpsum(i, 4)}
                </TextLink>
              </Example>);
        })}
      </Group>

      <Group title="TextInput">
        {[
            { variant: 'outlined', helpText: true },
            { variant: 'outlined', helpText: false, error: true },
            { variant: 'outlined', helpText: true, disabled: true },
            { variant: 'solid', helpText: true },
            { variant: 'solid', helpText: false, error: true },
            { variant: 'solid', helpText: true, disabled: true },
        ].map((values, i) => {
            const { variant, error, helpText, disabled } = values;
            const key = valuesToKey(values);
            return (<Example key={key} name={key}>
              <TextInput variant={variant} error={error ? getIpsum(i + 2, 10) : undefined} helpText={helpText ? getIpsum(i + 2, 4) : undefined} disabled={disabled} label={getIpsum(i + 1, 3)} value={getIpsum(i, 8)} onChange={() => null} width="100%"/>
            </Example>);
        })}
      </Group>

      <Group title="TextInput — Multiline">
        {[
            { variant: 'outlined', helpText: true },
            { variant: 'outlined', helpText: false, error: true },
            { variant: 'outlined', helpText: true, disabled: true },
            { variant: 'solid', helpText: true },
            { variant: 'solid', helpText: false, error: true },
            { variant: 'solid', helpText: true, disabled: true },
        ].map((values, i) => {
            const { variant, error, helpText, disabled } = values;
            const key = valuesToKey(values);
            return (<Example key={key} name={key}>
              <TextInput variant={variant} error={error ? getIpsum(i + 2, 10) : undefined} helpText={helpText ? getIpsum(i + 2, 4) : undefined} disabled={disabled} label={getIpsum(i + 1, 3)} value={getIpsum(i, 46)} onChange={() => null} width="100%" multiline={4} characterCount="inline"/>
            </Example>);
        })}
      </Group>

      <Group title="Select">
        {[
            { variant: 'outlined', success: true },
            { variant: 'outlined', success: true, disabled: true },
            { variant: 'outlined', error: true },
            { variant: 'outlined', error: true, disabled: true },
            { variant: 'solid', success: true },
            { variant: 'solid', success: true, disabled: true },
            { variant: 'solid', error: true },
            { variant: 'solid', error: true, disabled: true },
        ].map((values, i) => {
            const { variant, success, error, disabled } = values;
            const key = valuesToKey(values);
            return (<Example key={key} name={key}>
              <Select width="fluid" variant={variant} disabled={disabled} primaryLabel={getIpsum(i, 3)} aria-label={getIpsum(i, 3)} secondaryLabel={getIpsum(i + 1, 3)} helperText={!error ? getIpsum(i + 2, 10) : undefined} error={error ? getIpsum(i + 3, 10) : undefined} success={success ? getIpsum(i + 2, 10) : undefined} options={[
                    { value: 'Option 1', label: 'Option 1' },
                    { value: 'Option 2', label: 'Option 2', defaultSelected: true },
                    { value: 'Option 3', label: 'Option 3' },
                    { value: 'Option 4', label: 'Option 4' },
                ]}/>
            </Example>);
        })}
      </Group>

      <Group title="Checkbox">
        {[
            { checked: false },
            { checked: true },
            { indeterminate: true },
            { disabled: true, checked: false },
            { disabled: true, checked: true },
            { disabled: true, indeterminate: true },
        ].map((values, i) => {
            const { checked, indeterminate, disabled } = values;
            const key = valuesToKey(values);
            return (<Example key={key} name={key}>
              <Checkbox label={getIpsum(i, 4)} disabled={disabled} checked={checked} indeterminate={indeterminate} onChange={() => null}/>
            </Example>);
        })}
      </Group>

      <Group title="RadioButton">
        {[
            { checked: false },
            { checked: true },
            { disabled: true, checked: false },
            { disabled: true, checked: true },
        ].map((values, i) => {
            const { checked, disabled } = values;
            const key = valuesToKey(values);
            return (<Example key={key} name={key}>
              <RadioButton value={i} disabled={disabled} checked={checked} onChange={() => null}>
                {getIpsum(i, 4)}
              </RadioButton>
            </Example>);
        })}
      </Group>

      <Group title="Toggle">
        {[{ isOn: false }, { isOn: true }, { disabled: true, isOn: false }, { disabled: true, isOn: true }].map((values, i) => {
            const { isOn, disabled } = values;
            const key = valuesToKey(values);
            return (<Example key={key} name={key}>
                <Stack flexDirection="row" gap={tokens.global.space.x16}>
                  <Toggle disabled={disabled} isOn={isOn}/>
                  <BodyText>{getIpsum(i, 4)}</BodyText>
                </Stack>
              </Example>);
        })}
      </Group>
    </Stack>);
    if (inputColor === 'reset') {
        return render;
    }
    return <ColorSystemContainer color={inputColor}>{render}</ColorSystemContainer>;
}
//# sourceMappingURL=index.jsx.map