import { RtFrame } from '@dpa/react-frame-intro';
import { RtText } from '@dpa/react-text';
import {
  ChevronDownAnimatedIcon,
  InfoCircleFillAnimatedIcon,
  Line3AnimatedIcon,
  PencilAnimatedIcon,
  PencilFillAnimatedIcon,
  SquareBadgePencilAnimatedIcon,
  XmarkAnimatedIcon,
  XmarkCircleAnimatedIcon,
  XmarkCircleFillAnimatedIcon,
} from '@dpa/react-animated-icons';
import { PropsWithChildren } from 'react';

export function AnimateIconsPage() {
  return (
    <RtFrame
      as="div"
      surface="foundation-low-tint"
      modifier="coloring"
      style={{
        minHeight: '100vh',
        padding: '40px',
      }}
    >
      <RtFrame
        as="div"
        surface="foundation-pure"
        use="foggy"
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '20px',
          borderRadius: '10px',
          padding: '24px',
        }}
      >
        <RtText typography="title-md-medium">Animate Icons</RtText>

        <div style={{ display: 'flex', gap: '52px', flexWrap: 'wrap' }}>
          <IconsRow
            label="ChevronDownAnimatedIcon"
            icon={ChevronDownAnimatedIcon}
          />
          <IconsRow
            label="InfoCircleFillAnimatedIcon"
            icon={InfoCircleFillAnimatedIcon}
          />
          <IconsRow label="Line3AnimatedIcon" icon={Line3AnimatedIcon} />
          <IconsRow
            label="PencilFillAnimatedIcon"
            icon={PencilFillAnimatedIcon}
          />
          <IconsRow label="PencilAnimatedIcon" icon={PencilAnimatedIcon} />
          <IconsRow
            label="SquareBadgePencilAnimatedIcon"
            icon={SquareBadgePencilAnimatedIcon}
          />
          <IconsRow
            label="XmarkCircleAnimatedIcon"
            icon={XmarkCircleAnimatedIcon}
          />
          <IconsRow
            label="XmarkCircleFillAnimatedIcon"
            icon={XmarkCircleFillAnimatedIcon}
          />
          <IconsRow label="XmarkAnimatedIcon" icon={XmarkAnimatedIcon} />
        </div>
      </RtFrame>
    </RtFrame>
  );
}

const IconsRow = (
  props: PropsWithChildren<{
    label: string;
    icon: typeof ChevronDownAnimatedIcon;
  }>
) => {
  const Icon = props.icon;

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'start',
        gap: '16px',
      }}
    >
      <RtText typography="body-lg-medium">{props.label}</RtText>

      <div style={{ display: 'flex', gap: '12px', alignItems: 'start' }}>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '16px',
            alignItems: 'center',
          }}
        >
          <RtText typography="body-sm-medium" specification="variant">
            click
          </RtText>
          <Icon typography="symbol-sm-primary" animateStrategy="click" />
        </div>

        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '16px',
            alignItems: 'center',
          }}
        >
          <RtText typography="body-sm-medium" specification="variant">
            hover
          </RtText>
          <Icon typography="symbol-sm-primary" animateStrategy="hover" />
        </div>

        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '16px',
            alignItems: 'center',
          }}
        >
          <RtText typography="body-sm-medium" specification="variant">
            infinite
          </RtText>
          <Icon typography="symbol-sm-primary" animateStrategy="infinite" />
        </div>

        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '16px',
            alignItems: 'center',
          }}
        >
          <RtText typography="body-sm-medium" specification="variant">
            init
          </RtText>
          <Icon typography="symbol-sm-primary" animateStrategy="init" />
        </div>
      </div>
    </div>
  );
};