import React, { ComponentProps, useState } from 'react';
import { RtFormFieldText } from '@dpa/react-form-field-text';
import { AirplaneTypographyIcon } from '@dpa/react-typography-icons';
import { RtSticker } from '@dpa/react-sticker';
import classnames from 'classnames/bind';
import styles from './index.module.css';
import { RtFrame } from '@dpa/react-frame-intro';

const cn = classnames.bind(styles);

export function StickersPage() {
  const [value, setValue] = useState<number>(1000);

  type useType = ComponentProps<typeof RtFrame>['use'];
  const [use, setUse] = useState<useType>('cloudy');
  const useList: useType[] = ['cloudy', 'foggy', 'success', 'primary'];

  return (
    <div>
      <RtFrame
        as="div"
        use={use}
        surface="foundation-pure"
        className={cn('grid')}
      >
        <RtSticker
          count={value}
          radius="secondary"
          leadingIcon={AirplaneTypographyIcon}
        >
          <div className={cn('box')}>radius</div>
        </RtSticker>
        <RtSticker count={value} dot>
          <div className={cn('box')}>dot</div>
        </RtSticker>
        <RtSticker count={value} dot border>
          <div className={cn('box')}>dot border</div>
        </RtSticker>
        <RtSticker count={value} border use="success">
          <div className={cn('box')}>border</div>
        </RtSticker>
        <RtSticker count={value} leadingIcon={AirplaneTypographyIcon}>
          <div className={cn('box')}>change icon</div>
        </RtSticker>
        <RtSticker count={value} reverseIcon>
          <div className={cn('box')}>reverse icon</div>
        </RtSticker>
        <RtSticker count={value} use="success">
          <div className={cn('box')}>change variant</div>
        </RtSticker>
        <RtSticker count={value} showZero>
          <div className={cn('box')}>show zero</div>
        </RtSticker>
        <RtSticker count={value} overflowCount={99}>
          <div className={cn('box')}>overflow count</div>
        </RtSticker>
        <RtSticker count="!" overflowCount={99}>
          <div className={cn('box')}>exclamation mark</div>
        </RtSticker>
        <RtSticker count="123/321" overflowCount={99}>
          <div className={cn('box')}>fraction</div>
        </RtSticker>
        <RtSticker count="1/3" border radius="secondary">
          <div className={cn('box')}>fraction border radius</div>
        </RtSticker>
        <RtSticker count={value} />
      </RtFrame>
      <RtFormFieldText
        use="neutral"
        label="Set Count"
        onChange={({ event }) => setValue(+event.target.value)}
        type="number"
        value={`${value}`}
        size="md"
        ui="normal"
      />
      <select value={use} onChange={(e) => setUse(e.target.value as useType)}>
        {useList.map((use) => (
          <option key={use} value={use}>
            {use}
          </option>
        ))}
      </select>
    </div>
  );
}