import { RtButton } from '@dpa/react-buttons';
import { RtFrame } from '@dpa/react-frame-intro';
import { RtText } from '@dpa/react-text';
import { useState } from 'react';

type TogglerParams<T> = {
  label?: string;
  value: T;
  values: T[];
  change: (value: T) => void;
};

export const useToggler = <T extends string | boolean>(params: {
  initialValue: T;
  label?: string;
  values: TogglerParams<T>['values'];
  onChange?: () => void;
}): TogglerParams<T> => {
  const [value, setValue] = useState<T>(params.initialValue);

  return {
    value,
    values: params.values,
    label: params.label,
    change: (value: T) => {
      setValue(value);
      params.onChange?.();
    },
  };
};

export const Toggler = <T extends string | boolean>(props: {
  options: TogglerParams<T>;
}) => {
  return (
    <div
      style={{
        display: 'flex',
        gap: '8px',
        alignItems: 'center',
      }}
    >
      <div style={{ flexShrink: '0' }}>
        <RtText typography="symbol-md-primary">{props.options.label}</RtText>
      </div>

      <RtFrame
        as="div"
        modifier="mono"
        surface="foundation-low-tint"
        use="neutral"
        style={{
          display: 'flex',
          gap: '4px',
          width: 'fit-content',
          borderRadius: '10px',
          padding: '4px',
          minWidth: 0,
          flexWrap: 'wrap',
        }}
      >
        {props.options.values.map((item) => (
          <RtButton
            key={`${item}`}
            label={typeof item === 'boolean' ? (item ? 'true' : 'false') : item}
            size="sm"
            modifier={item === props.options.value ? 'base' : 'filling'}
            onClick={() => props.options.change(item)}
            use={item === props.options.value ? 'primary' : 'neutral'}
          />
        ))}
      </RtFrame>
    </div>
  );
};