import { RtFrame } from '@dpa/react-frame-intro';
import {
  RtSymbolAction,
  RtSymbolActionOriginProps,
} from '@dpa/react-symbol-action';
import { RtText } from '@dpa/react-text';

function SymbolActionWithBg(props: RtSymbolActionOriginProps) {
  return (
    <div style={{ outline: 'dashed red 1px', display: 'flex' }}>
      <RtSymbolAction.Chevron {...props} />
    </div>
  );
}

export function SymbolActionPage() {
  return (
    <div>
      <RtFrame
        as="div"
        surface="foundation-low-tint"
        style={{
          padding: '50px 36px',
          display: 'flex',
          flexDirection: 'column',
          gap: '16px',
        }}
      >
        <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
          <SymbolActionWithBg width="min-content" height="min-content" />

          <SymbolActionWithBg width="min-content" height="sm" />

          <SymbolActionWithBg width="min-content" height="md" use="positive" />

          <SymbolActionWithBg width="min-content" height="lg" use="primary" />
        </div>

        <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
          <SymbolActionWithBg width="sm" height="min-content" />

          <SymbolActionWithBg width="sm" height="sm" />

          <SymbolActionWithBg width="sm" height="md" use="positive" />

          <SymbolActionWithBg width="sm" height="lg" use="primary" />
        </div>

        <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
          <SymbolActionWithBg width="md" height="min-content" />

          <SymbolActionWithBg width="md" height="sm" />

          <SymbolActionWithBg width="md" height="md" use="positive" />

          <SymbolActionWithBg width="md" height="lg" use="primary" />
        </div>

        <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
          <SymbolActionWithBg width="lg" height="min-content" />

          <SymbolActionWithBg width="lg" height="sm" />

          <SymbolActionWithBg width="lg" height="md" use="positive" />

          <SymbolActionWithBg width="lg" height="lg" use="primary" />

          <div style={{ outline: 'dashed red 1px', display: 'flex' }}>
            <RtSymbolAction.Clear width="lg" height="lg" use="primary" />
          </div>
        </div>
      </RtFrame>

      <RtFrame
        as="div"
        surface="foundation-low-tint"
        style={{
          padding: '50px 36px',
          display: 'flex',
          flexDirection: 'column',
          gap: '16px',
          margin: '50px 0',
        }}
      >
        <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
          <SymbolActionWithBg
            targetSize="recommended"
            width="min-content"
            height="min-content"
            label="Label"
            use="positive"
          />

          <SymbolActionWithBg
            targetSize="recommended"
            width="min-content"
            height="sm"
            icon={false}
            label="No icon"
          />

          <SymbolActionWithBg
            targetSize="recommended"
            width="min-content"
            height="md"
          />

          <SymbolActionWithBg
            targetSize="recommended"
            width="min-content"
            height="lg"
            use="primary"
          />
        </div>
        <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
          <SymbolActionWithBg
            targetSize="recommended"
            width="sm"
            height="min-content"
            label="leading"
            use="positive"
          />

          <SymbolActionWithBg targetSize="recommended" width="sm" height="sm" />

          <SymbolActionWithBg targetSize="recommended" width="sm" height="md" />

          <SymbolActionWithBg
            targetSize="recommended"
            width="sm"
            height="lg"
            use="primary"
          />
        </div>
        <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
          <SymbolActionWithBg
            targetSize="recommended"
            width="md"
            height="min-content"
            label="trailing"
            use="positive"
            labelPosition="trailing"
          />

          <SymbolActionWithBg targetSize="recommended" width="md" height="sm" />

          <SymbolActionWithBg targetSize="recommended" width="md" height="md" />

          <SymbolActionWithBg
            targetSize="recommended"
            width="md"
            height="lg"
            use="primary"
          />
        </div>
        <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
          <SymbolActionWithBg
            targetSize="recommended"
            width="lg"
            height="min-content"
            label="trailing"
            use="positive"
            labelPosition="trailing"
          />

          <SymbolActionWithBg targetSize="recommended" width="lg" height="sm" />

          <SymbolActionWithBg targetSize="recommended" width="lg" height="md" />

          <SymbolActionWithBg
            targetSize="recommended"
            width="lg"
            height="lg"
            use="primary"
          />
          <SymbolActionWithBg
            targetSize="recommended"
            width="lg"
            height="lg"
            use="error"
          />
        </div>
      </RtFrame>
    </div>
  );
}