import { FC } from 'react';

interface CGSelectProps {
  minCG: number;
  maxCG: number;
  value: number;
  disabled: boolean;
  increase: () => void;
  decrease: () => void;
}

const CGSelect: FC<CGSelectProps> = ({ minCG, maxCG, value, disabled, increase, decrease }) => {
  return (
    <div className="relative">
      <input
        disabled
        className="w-full rounded-lg border border-white bg-zinc-700 px-3 py-2 text-white shadow-sm focus:border-blue-600 focus:outline-none focus:ring-blue-600"
        value={value.toFixed(1)}
      />
      <button
        disabled={disabled || value <= minCG}
        className="absolute right-2 top-0 -mt-[.5px] border-t bg-zinc-700 text-white disabled:text-zinc-400"
        onClick={increase}
      >
        {/* FIXME: FONTAWESOME IN EFB */}
        <svg
          aria-hidden="true"
          focusable="false"
          data-prefix="fas"
          data-icon="caret-up"
          className="svg-inline--fa fa-caret-up "
          role="img"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 320 512"
          style={{
            height: '1em',
            verticalAlign: '-0.125em',
            display: 'inline-block',
            boxSizing: 'content-box',
          }}
        >
          <path
            fill="currentColor"
            d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"
          ></path>
        </svg>
      </button>
      <button
        disabled={disabled || value >= maxCG}
        className="absolute bottom-0 right-2 -mt-[.5px] border-b bg-zinc-700 text-white disabled:text-zinc-400"
        onClick={decrease}
      >
        {/* FIXME: FONTAWESOME IN EFB */}
        <svg
          aria-hidden="true"
          focusable="false"
          data-prefix="fas"
          data-icon="caret-down"
          className="svg-inline--fa fa-caret-down "
          role="img"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 320 512"
          style={{
            height: '1em',
            verticalAlign: '-0.125em',
            display: 'inline-block',
            boxSizing: 'content-box',
          }}
        >
          <path
            fill="currentColor"
            d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"
          ></path>
        </svg>
      </button>
    </div>
  );
};

export default CGSelect;