import React from 'react';

import type { PricingPlan } from '../../utils/pricingModel';

interface PlanSliderProps {
  plans: PricingPlan[];
  index: number;
  onChange: (index: number) => void;
}

/** Tailwind needs the class spelled out, so the fill spans by lookup. */
const FILL_SPAN = [
  'hidden',
  'col-span-1',
  'col-span-2',
  'col-span-3',
  'col-span-4',
  'col-span-5',
];
const TRACK_COLS = [
  '',
  'grid-cols-1',
  'grid-cols-2',
  'grid-cols-3',
  'grid-cols-4',
  'grid-cols-5',
];
const STOP_COLS = [
  '',
  'grid-cols-1',
  'grid-cols-2',
  'grid-cols-3',
  'grid-cols-4',
  'grid-cols-5',
  'grid-cols-6',
];

/**
 * How much do you want done: one stop per plan on a slider, the way
 * recomaze.ai/pricing asks it. The track fills up to the chosen stop; the
 * stops under it are buttons too.
 */
export const PlanSlider = ({
  plans,
  index,
  onChange,
}: PlanSliderProps): JSX.Element => {
  const segments = Math.max(plans.length - 1, 1);

  return (
    <div className="w-full px-2.5">
      <div className="relative h-8">
        <div
          className={[
            'absolute inset-x-0 top-1/2 grid h-1.5 -translate-y-1/2 overflow-hidden rounded-full bg-muted',
            TRACK_COLS[segments],
          ].join(' ')}
        >
          <div
            className={[
              'h-full rounded-full bg-brand',
              FILL_SPAN[Math.min(index, segments)],
            ].join(' ')}
          />
        </div>
        <input
          type="range"
          min={0}
          max={segments}
          step={1}
          value={index}
          aria-label="How much do you want done"
          className="plan-slider-input absolute inset-0 w-full"
          onChange={event => onChange(Number(event.target.value))}
        />
      </div>
      <div className={['mt-3 grid', STOP_COLS[plans.length]].join(' ')}>
        {plans.map((plan, stopIndex) => (
          <button
            type="button"
            key={plan.key}
            className={[
              'px-1 text-center text-[15px] font-semibold leading-tight transition-colors first:text-left last:text-right',
              stopIndex === index
                ? 'text-foreground'
                : 'text-muted-foreground hover:text-foreground',
            ].join(' ')}
            onClick={() => onChange(stopIndex)}
          >
            {plan.name}
            <small className="mt-0.5 block text-xs font-normal text-muted-foreground">
              {plan.stop}
            </small>
          </button>
        ))}
      </div>
    </div>
  );
};