'use client';

import { cn } from '@/lib';
import { useControllableValue } from 'ahooks';
import { APlusIcon, A_Icon } from '@/assets/components';
import { InputLeft } from '.';
import isNumber from 'lodash/isNumber';

type FontSizeProps = {
  value?: number;
  onChange?: (value: number) => void;
  min?: number;
  max?: number;
  // 最小精度
} & React.HTMLAttributes<HTMLDivElement>;

export default function FontSize(props: FontSizeProps) {
  const { min = 1, max = 100 } = props;
  const [value, onChange] = useControllableValue(props);
  const className =
    'hover:cursor-pointer hover:bg-text-color/10 rounded-md p-1 text-text-color/60';
  return (
    <div className={cn('input-view justify-between')}>
      <InputLeft icon={'/component/font_size.svg'} text="Font Size" />
      <div className="flex">
        <span
          onClick={() =>
            isNumber(value) && onChange(Math.max(value - 1, min ?? 0))
          }
          className={className}
        >
          <A_Icon />
        </span>
        <input
          min={min}
          max={max}
          value={value ?? ''}
          onChange={(e) => {
            const val = e.target.value;
            onChange(val ? parseFloat(val) : undefined);
          }}
          className="w-30 [appearance:textfield] border-none bg-transparent text-center outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
          type="number"
        />
        <span
          onClick={() =>
            isNumber(value) && onChange(Math.min(value + 1, max ?? 0))
          }
          className={className}
        >
          <APlusIcon />
        </span>
      </div>
    </div>
  );
}
