import { HTMLAttributes } from 'react';
import { RtSegmentProps, RtSegmentSize } from './types/rt-segment.types';
import { RtFrame } from '@dpa/react-frame-intro';
import { RtText } from '@dpa/react-text';

import styles from './styles/rt-segment.module.css';
import classnames from 'classnames/bind';
import { useRtBaseProps } from '@dpa/react-hoc';
import { RtBaseProps } from '@dpa/react-hoc';

const cn = classnames.bind(styles);

const mapTextSize: Record<RtSegmentSize, RtSegmentSize> = {
  sm: 'sm',
  md: 'sm',
  lg: 'md',
};

export const RtSegment = (
  props: RtSegmentProps &
    HTMLAttributes<HTMLButtonElement> &
    RtBaseProps<HTMLButtonElement>
) => {
  const {
    id,
    className,
    active,
    size = 'md',
    counter,
    radius,
    disabled,
    unselectable,
    grow,
    activeUse,
    use,
    text,
    icon: Icon,
    onClick,
    ...restProps
  } = props;

  const baseProps = useRtBaseProps(restProps, '0.2.2');

  return (
    <RtFrame
      {...baseProps}
      {...restProps}
      as="button"
      use={active ? activeUse : use}
      onClick={onClick}
      surface="control"
      surfaceState={disabled ? 'disabled' : 'native'}
      modifier={active ? 'base' : 'filling'}
      className={cn(
        'rt-segment',
        `rt-segment-${radius}`,
        {
          'rt-segment-grow': grow,
        },
        className
      )}
      style={{
        cursor: active || disabled ? 'default' : 'pointer',
        pointerEvents: disabled ? 'none' : 'auto',
      }}
      tabIndex={disabled ? -1 : 0}
    >
      <div className={cn({ 'segment-text-group': !!text })}>
        {Icon && (
          <div className={cn('segment-text')}>
            <Icon typography={`symbol-${mapTextSize[size]}-primary`} />
          </div>
        )}

        {text && (
          <RtText
            className={cn('segment-text')}
            typography={`symbol-${mapTextSize[size]}-primary`}
          >
            {text}
          </RtText>
        )}

        {counter && (
          <RtText
            className={cn('segment-text', 'segment-counter-text')}
            typography={`symbol-${mapTextSize[size]}-primary`}
            specification="variant"
          >
            {counter}
          </RtText>
        )}
      </div>
    </RtFrame>
  );
};