import { RtFrame, RtModifier, RtUse } from '@dpa/react-frame-intro';
import { RtText } from '@dpa/react-text';
import { RtButton, RtButtonRich } from '@dpa/react-buttons';
import {
  CardDoubledTypographyIcon,
  InfoCircleFillTypographyIcon,
  PlusTypographyIcon,
  SparkTypographyIcon,
} from '@dpa/react-typography-icons';
import { Toggler, useToggler } from './components/toggler';
import { useRTL } from '../../hooks/useRTL';
import { RtGrid } from '@dpa/react-grid';
import { Link } from 'react-router-dom';

export function ButtonsPage() {
  const { isRTL, toggleRTL } = useRTL();

  const directionalityToggler = useToggler<'rtl' | 'ltr'>({
    initialValue: isRTL ? 'rtl' : 'ltr',
    label: 'Directionality text',
    values: ['ltr', 'rtl'],
    onChange: toggleRTL,
  });

  const loadingToggler = useToggler<boolean>({
    initialValue: false,
    label: 'Loading',
    values: [false, true],
  });

  const modificatorTogglerAchromatic = useToggler<RtModifier>({
    initialValue: 'base',
    label: 'Modificator',
    values: ['base', 'mono', 'coloring', 'filling'],
  });

  const useTogglerAchromatic = useToggler<RtUse>({
    initialValue: 'achromatic-ashy',
    label: 'Surface Use',
    values: [
      'achromatic-ashy',
      'achromatic-cloudy',
      'primary',
      'secondary',
      'tertiary',
      'quaternary',
      'foggy',
      'cloudy',
      'ashy',
      'error',
      'success',
      'warning',
      'neutral',
      'notice',
      'positive',
      'attention',
      'negative',
    ],
  });

  const sizeTogglerAchromatic = useToggler<'sm' | 'md' | 'lg' | 'xl'>({
    initialValue: 'sm',
    label: 'Size',
    values: ['sm', 'md', 'lg', 'xl'],
  });

  const textDecorationLineTogglerAchromatic = useToggler<
    'none' | 'line-through' | 'underline'
  >({
    initialValue: 'none',
    label: 'Text Decoration Line',
    values: ['none', 'line-through', 'underline'],
  });

  return (
    <RtFrame
      as="div"
      surface="foundation-low-tint"
      use="achromatic-ashy"
      style={{
        minHeight: '100vh',
        padding: '40px',
      }}
    >
      <RtFrame
        as="div"
        surface="foundation-pure"
        use="achromatic-cloudy"
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '20px',
          borderRadius: '10px',
          padding: '24px',
        }}
      >
        <div style={{ width: '100px' }}>
          <RtButton
            modifier="base"
            use="primary"
            size="lg"
            radius="primary"
            textJustify="center"
            label="Добавить продавца"
            leadingIcon={PlusTypographyIcon}
            height="hug"
            width="fill"
          />
        </div>

        <div style={{ width: '25px', height: '100px' }}>
          <RtButton
            use="secondary"
            size="md"
            width="fill"
            height="fill"
            label="1"
          />
        </div>

        <div>
          <RtButton
            use="secondary"
            size="md"
            width="hug"
            height="hug"
            label="1"
          />
        </div>

        <div
          style={{
            display: 'flex',
            maxWidth: '420px',
            gap: '16px',
            maxHeight: '564px',
          }}
        >
          <RtButton
            modifier="base"
            use="primary"
            size="lg"
            radius="primary"
            textJustify="center"
            label="Добавить продавца"
            leadingIcon={PlusTypographyIcon}
            height="fill"
            width="hug"
          />
          <RtButton
            modifier="base"
            use="generic"
            size="lg"
            radius="primary"
            textJustify="center"
            label="Удалиться из аккаунта поставщика"
            textWrap
            width="fill"
            textWidth="fill"
          />
        </div>

        <div
          style={{
            display: 'flex',
            maxWidth: '564px',
            gap: '16px',
            maxHeight: '564px',
          }}
        >
          <RtButton
            modifier="base"
            use="primary"
            size="lg"
            radius="primary"
            textJustify="center"
            label="Добавить продавца"
            leadingIcon={PlusTypographyIcon}
            height="fill"
            width="hug"
          />
          <RtButton
            modifier="base"
            use="generic"
            size="lg"
            radius="primary"
            textJustify="center"
            label="Удалиться из аккаунта поставщика"
            textWrap
            width="fill"
            textWidth="fill"
          />
        </div>

        <div
          style={{
            display: 'flex',
            maxWidth: '563px',
            gap: '16px',
            flexDirection: 'column',
            height: '200px',
          }}
        >
          <RtButton
            label="Добавить продавца"
            leadingIcon={PlusTypographyIcon}
            modifier="base"
            radius="primary"
            size="lg"
            textJustify="center"
            use="primary"
            width="fill"
            height="fill"
          />
          <RtButton
            modifier="base"
            use="generic"
            size="lg"
            radius="primary"
            textJustify="center"
            label="Удалиться из аккаунта поставщика"
            textWrap
            width="fill"
            textWidth="fill"
            height="fill"
          />
        </div>

        <div
          style={{
            display: 'flex',
            maxWidth: '563px',
            gap: '16px',
            flexDirection: 'column',
            height: '300px',
          }}
        >
          <RtButton
            label="Добавить продавца"
            leadingIcon={PlusTypographyIcon}
            modifier="base"
            radius="primary"
            size="lg"
            textJustify="center"
            use="primary"
            width="hug"
            height="hug"
          />
          <RtButton
            modifier="base"
            use="generic"
            size="lg"
            radius="primary"
            textJustify="center"
            label="Удалиться из аккаунта поставщика"
            textWrap
            width="fill"
            textWidth="fill"
            height="fill"
          />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }}>
          <RtButton
            leadingIcon={CardDoubledTypographyIcon}
            trailingIcon={CardDoubledTypographyIcon}
            modifier={'base'}
            radius="secondary"
            size="md"
            use={'primary'}
            height="fill"
          />
          <RtButton
            leadingIcon={CardDoubledTypographyIcon}
            modifier={'base'}
            radius="secondary"
            size="lg"
            use={'primary'}
            height="hug"
          />
          <RtButton
            leadingIcon={CardDoubledTypographyIcon}
            modifier={'base'}
            radius="secondary"
            size="xl"
            use={'primary'}
            height="fill"
            width="hug"
          />
        </div>

        <div style={{ display: 'flex' }}>
          <RtButton
            modifier={'base'}
            radius="secondary"
            size="md"
            textWidth="fill"
            label="ritm?"
            use={'primary'}
            height="fill"
          />
          <RtButton
            label="ritm?"
            modifier={'base'}
            radius="secondary"
            size="lg"
            textWidth="fill"
            use={'primary'}
          />
          <RtButton
            label="ritm?"
            modifier={'base'}
            radius="secondary"
            size="xl"
            textWidth="fill"
            subLabel="ritm"
            use={'primary'}
            height="fill"
          />
        </div>

        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            width: 'max-content',
          }}
        >
          <RtButton
            leadingIcon={CardDoubledTypographyIcon}
            modifier={'base'}
            radius="secondary"
            size="md"
            textWidth="fill"
            use={'primary'}
            height="hug"
            width="fill"
          />
          <RtButton
            leadingIcon={CardDoubledTypographyIcon}
            modifier={'base'}
            radius="secondary"
            size="lg"
            textWidth="fill"
            use={'primary'}
          />
          <RtButton
            leadingIcon={CardDoubledTypographyIcon}
            modifier={'base'}
            radius="secondary"
            size="xl"
            textWidth="fill"
            use={'primary'}
          />
        </div>

        <RtText typography="title-md-medium">RT Button Rich</RtText>
        <Toggler options={modificatorTogglerAchromatic} />
        <Toggler options={useTogglerAchromatic} />
        <Toggler options={sizeTogglerAchromatic} />
        <Toggler options={modificatorTogglerAchromatic} />
        <Toggler options={directionalityToggler} />
        <Toggler options={loadingToggler} />
        <Toggler options={textDecorationLineTogglerAchromatic} />

        <div
          style={{
            display: 'flex',
            flexWrap: 'wrap',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
            padding: '24px',
          }}
        >
          <RtButtonRich
            modifier={modificatorTogglerAchromatic.value}
            use={useTogglerAchromatic.value}
            size={sizeTogglerAchromatic.value}
            leadingIcon={SparkTypographyIcon}
            loading={loadingToggler.value}
            textDecorationLine={textDecorationLineTogglerAchromatic.value}
          />

          <RtButtonRich
            modifier={modificatorTogglerAchromatic.value}
            use={useTogglerAchromatic.value}
            size={sizeTogglerAchromatic.value}
            leadingIcon={SparkTypographyIcon}
            label="Label"
            loading={loadingToggler.value}
            textDecorationLine={textDecorationLineTogglerAchromatic.value}
          />

          <RtButtonRich
            modifier={modificatorTogglerAchromatic.value}
            use={useTogglerAchromatic.value}
            size={sizeTogglerAchromatic.value}
            trailingIcon={InfoCircleFillTypographyIcon}
            label="Label"
            loading={loadingToggler.value}
            textDecorationLine={textDecorationLineTogglerAchromatic.value}
          />

          <RtButtonRich
            modifier={modificatorTogglerAchromatic.value}
            use={useTogglerAchromatic.value}
            size={sizeTogglerAchromatic.value}
            trailingIcon={InfoCircleFillTypographyIcon}
            subLabel="Sub Label"
            loading={loadingToggler.value}
            textDecorationLine={textDecorationLineTogglerAchromatic.value}
          />

          <RtButtonRich
            modifier={modificatorTogglerAchromatic.value}
            use={useTogglerAchromatic.value}
            size={sizeTogglerAchromatic.value}
            leadingIcon={SparkTypographyIcon}
            trailingIcon={InfoCircleFillTypographyIcon}
            label="Label"
            loading={loadingToggler.value}
            disabled
            textDecorationLine={textDecorationLineTogglerAchromatic.value}
          />

          <RtButtonRich
            modifier={modificatorTogglerAchromatic.value}
            use={useTogglerAchromatic.value}
            size={sizeTogglerAchromatic.value}
            prependIcon={SparkTypographyIcon}
            appendIcon={InfoCircleFillTypographyIcon}
            leadingIcon={SparkTypographyIcon}
            trailingIcon={InfoCircleFillTypographyIcon}
            label="Label"
            subLabel="Default"
            loading={loadingToggler.value}
            textDecorationLine={textDecorationLineTogglerAchromatic.value}
          />

          <RtButtonRich
            modifier={modificatorTogglerAchromatic.value}
            use={useTogglerAchromatic.value}
            size={sizeTogglerAchromatic.value}
            prependIcon={SparkTypographyIcon}
            appendIcon={InfoCircleFillTypographyIcon}
            leadingIcon={SparkTypographyIcon}
            trailingIcon={InfoCircleFillTypographyIcon}
            radius="secondary"
            label="Label"
            subLabel="radius: secondary"
            loading={loadingToggler.value}
            textDecorationLine={textDecorationLineTogglerAchromatic.value}
          />

          <RtButtonRich
            modifier={modificatorTogglerAchromatic.value}
            use={useTogglerAchromatic.value}
            size={sizeTogglerAchromatic.value}
            prependIcon={SparkTypographyIcon}
            appendIcon={InfoCircleFillTypographyIcon}
            leadingIcon={SparkTypographyIcon}
            trailingIcon={InfoCircleFillTypographyIcon}
            textJustify="start"
            label="Label"
            subLabel="textJustify: start"
            loading={loadingToggler.value}
            textDecorationLine={textDecorationLineTogglerAchromatic.value}
          />

          <RtButtonRich
            modifier={modificatorTogglerAchromatic.value}
            use={useTogglerAchromatic.value}
            size={sizeTogglerAchromatic.value}
            prependIcon={SparkTypographyIcon}
            appendIcon={InfoCircleFillTypographyIcon}
            leadingIcon={SparkTypographyIcon}
            trailingIcon={InfoCircleFillTypographyIcon}
            textJustify="end"
            label="Label"
            subLabel="textJustify: end"
            loading={loadingToggler.value}
            textDecorationLine={textDecorationLineTogglerAchromatic.value}
          />

          <div style={{ display: 'flex', width: '120px' }}>
            <RtButtonRich
              modifier={modificatorTogglerAchromatic.value}
              use={useTogglerAchromatic.value}
              size={sizeTogglerAchromatic.value}
              prependIcon={SparkTypographyIcon}
              appendIcon={InfoCircleFillTypographyIcon}
              leadingIcon={SparkTypographyIcon}
              trailingIcon={InfoCircleFillTypographyIcon}
              label="No wrapp!"
              subLabel="Very long description"
              loading={loadingToggler.value}
              width="fill"
              textDecorationLine={textDecorationLineTogglerAchromatic.value}
            />
          </div>

          <div style={{ display: 'flex', width: '120px' }}>
            <RtButtonRich
              modifier={modificatorTogglerAchromatic.value}
              use={useTogglerAchromatic.value}
              size={sizeTogglerAchromatic.value}
              prependIcon={SparkTypographyIcon}
              appendIcon={InfoCircleFillTypographyIcon}
              leadingIcon={SparkTypographyIcon}
              trailingIcon={InfoCircleFillTypographyIcon}
              label="Text wrapp"
              subLabel="Very long description"
              textWrap
              width="fill"
              loading={loadingToggler.value}
              textDecorationLine={textDecorationLineTogglerAchromatic.value}
            />
          </div>

          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              height: '160px',
            }}
          >
            <RtButtonRich
              modifier={modificatorTogglerAchromatic.value}
              use={useTogglerAchromatic.value}
              size={sizeTogglerAchromatic.value}
              prependIcon={SparkTypographyIcon}
              appendIcon={InfoCircleFillTypographyIcon}
              leadingIcon={SparkTypographyIcon}
              trailingIcon={InfoCircleFillTypographyIcon}
              height="fill"
              width="fill"
              label="Label"
              textHeight="fill"
              subLabel="labelsHeight: full"
              textWrap
              loading={loadingToggler.value}
              textDecorationLine={textDecorationLineTogglerAchromatic.value}
            />
          </div>

          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              height: '160px',
              width: '300px',
            }}
          >
            <RtButtonRich
              modifier={modificatorTogglerAchromatic.value}
              use={useTogglerAchromatic.value}
              size={sizeTogglerAchromatic.value}
              prependIcon={SparkTypographyIcon}
              appendIcon={SparkTypographyIcon}
              leadingIcon={SparkTypographyIcon}
              trailingIcon={InfoCircleFillTypographyIcon}
              width="fill"
              label="Label"
              subLabel="labelsWidth: full"
              height="fill"
              textWidth="fill"
              loading={loadingToggler.value}
              textDecorationLine={textDecorationLineTogglerAchromatic.value}
            />
          </div>

          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              height: '160px',
              width: '300px',
            }}
          >
            <RtButtonRich
              modifier={modificatorTogglerAchromatic.value}
              use={useTogglerAchromatic.value}
              size={sizeTogglerAchromatic.value}
              prependIcon={SparkTypographyIcon}
              appendIcon={SparkTypographyIcon}
              leadingIcon={SparkTypographyIcon}
              trailingIcon={InfoCircleFillTypographyIcon}
              width="fill"
              label="Label"
              subLabel="labelsWidth: full"
              textWidth="fill"
              loading={loadingToggler.value}
              textDecorationLine={textDecorationLineTogglerAchromatic.value}
            />
          </div>
        </div>

        <div
          style={{
            display: 'flex',
            alignItems: 'flex-start',
            flexWrap: 'wrap',
            gap: '20px',
          }}
        >
          <RtGrid direction="vertical">
            <RtButton
              label="Label"
              radius="primary"
              use={useTogglerAchromatic.value}
              leadingIcon={SparkTypographyIcon}
              loading={loadingToggler.value}
            />
            <RtButton
              label="Label"
              radius="primary"
              use={useTogglerAchromatic.value}
              leadingIcon={SparkTypographyIcon}
              loading={loadingToggler.value}
            />
            <RtButton
              label="Label"
              radius="primary"
              use={useTogglerAchromatic.value}
              leadingIcon={SparkTypographyIcon}
              loading={loadingToggler.value}
            />
            <RtButton
              label="Label"
              radius="primary"
              use={useTogglerAchromatic.value}
              leadingIcon={SparkTypographyIcon}
              loading={loadingToggler.value}
            />
          </RtGrid>

          <RtGrid direction="vertical">
            <RtButton
              label="Label"
              radius="secondary"
              use={useTogglerAchromatic.value}
              leadingIcon={SparkTypographyIcon}
              loading={loadingToggler.value}
            />
            <RtButton
              label="Label"
              radius="secondary"
              use={useTogglerAchromatic.value}
              leadingIcon={SparkTypographyIcon}
              loading={loadingToggler.value}
            />
            <RtButton
              label="Label"
              radius="secondary"
              use={useTogglerAchromatic.value}
              leadingIcon={SparkTypographyIcon}
              loading={loadingToggler.value}
            />
            <RtButton
              label="Label"
              radius="secondary"
              use={useTogglerAchromatic.value}
              leadingIcon={SparkTypographyIcon}
              loading={loadingToggler.value}
            />
          </RtGrid>

          <div
            style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}
          >
            <RtGrid direction="horizontal">
              <RtButton
                label="Label"
                radius="primary"
                use={useTogglerAchromatic.value}
                leadingIcon={SparkTypographyIcon}
                loading={loadingToggler.value}
              />
              <RtButton
                label="Label"
                radius="primary"
                use={useTogglerAchromatic.value}
                leadingIcon={SparkTypographyIcon}
                loading={loadingToggler.value}
              />
              <RtButton
                label="Label"
                radius="primary"
                use={useTogglerAchromatic.value}
                leadingIcon={SparkTypographyIcon}
                loading={loadingToggler.value}
              />
              <RtButton
                label="Label"
                radius="primary"
                use={useTogglerAchromatic.value}
                leadingIcon={SparkTypographyIcon}
                loading={loadingToggler.value}
              />
            </RtGrid>

            <RtGrid direction="horizontal">
              <RtButton
                label="Label"
                radius="secondary"
                use={useTogglerAchromatic.value}
                leadingIcon={SparkTypographyIcon}
                loading={loadingToggler.value}
              />
              <RtButton
                label="Label"
                radius="secondary"
                use={useTogglerAchromatic.value}
                leadingIcon={SparkTypographyIcon}
                loading={loadingToggler.value}
              />
              <RtButton
                label="Label"
                radius="secondary"
                use={useTogglerAchromatic.value}
                leadingIcon={SparkTypographyIcon}
                loading={loadingToggler.value}
              />
              <RtButton
                label="Label"
                radius="secondary"
                use={useTogglerAchromatic.value}
                leadingIcon={SparkTypographyIcon}
                loading={loadingToggler.value}
              />
            </RtGrid>
          </div>
        </div>

        <RtText typography="title-md-medium">Button link</RtText>
        <div
          style={{
            display: 'flex',
            alignItems: 'flex-start',
            flexWrap: 'wrap',
            gap: '20px',
          }}
        >
          <RtButton
            as={'a'}
            href="https://wb.ru"
            label="Link a"
            target="_blank"
            modifier={modificatorTogglerAchromatic.value}
            use={useTogglerAchromatic.value}
            size={sizeTogglerAchromatic.value}
            loading={loadingToggler.value}
            textDecorationLine={textDecorationLineTogglerAchromatic.value}
          />
          <RtButton
            as={'a'}
            href="https://wb.ru"
            label="Link a disabled"
            use={useTogglerAchromatic.value}
            target="_blank"
            disabled
            modifier={modificatorTogglerAchromatic.value}
            size={sizeTogglerAchromatic.value}
            loading={loadingToggler.value}
            textDecorationLine={textDecorationLineTogglerAchromatic.value}
          />
          <RtButton
            as={Link}
            to="/checkbox"
            label="Link router"
            use={useTogglerAchromatic.value}
            modifier={modificatorTogglerAchromatic.value}
            size={sizeTogglerAchromatic.value}
            loading={loadingToggler.value}
            textDecorationLine={textDecorationLineTogglerAchromatic.value}
          />
          <RtButton
            as={Link}
            to="/checkbox"
            label="Link router disabled"
            modifier={modificatorTogglerAchromatic.value}
            use={useTogglerAchromatic.value}
            size={sizeTogglerAchromatic.value}
            loading={loadingToggler.value}
            textDecorationLine={textDecorationLineTogglerAchromatic.value}
            disabled
          />
          <RtButton
            type="button"
            label="Test type"
            modifier={modificatorTogglerAchromatic.value}
            use={useTogglerAchromatic.value}
            size={sizeTogglerAchromatic.value}
          />
        </div>
      </RtFrame>
    </RtFrame>
  );
}