import { CheckCircleFilledIcon } from '@trail-ui/icons';
import { ProgressBarSlots, SlotsToClasses, progressBar } from '@trail-ui/theme';
import { ForwardedRef, useMemo } from 'react';
import {
  Label,
  ProgressBar as AriaProgressBar,
  ProgressBarProps as AriaProgressBarProps,
} from 'react-aria-components';

export interface ProgressBarProps extends AriaProgressBarProps {
  label?: string;
  ref?: ForwardedRef<HTMLDivElement>;
  classNames?: SlotsToClasses<ProgressBarSlots>;
}

function ProgressBar({ label, ref, classNames, ...props }: ProgressBarProps) {
  const slots = useMemo(() => progressBar(), []);
  const isComplete = props.value === 100;

  return (
    <AriaProgressBar ref={ref} className={slots.base({ class: classNames?.base })} {...props}>
      {({ percentage, valueText }) => (
        <>
          <div className={slots.labelWrapper({ class: classNames?.labelWrapper })}>
            <Label>{label}</Label>
            <div className={slots.progressBarWrapper({ class: classNames?.progressBarWrapper })}>
              <div className={slots.bar({ class: classNames?.bar })}>
                <div
                  className={
                    isComplete
                      ? slots.completeColor({ class: classNames?.completeColor })
                      : slots.fillColor({ class: classNames?.fillColor })
                  }
                  style={{ width: percentage + '%' }}
                />
              </div>
              {isComplete ? (
                <CheckCircleFilledIcon height={16} width={16} className="text-green-800" />
              ) : (
                <span className={slots.valueText({ class: classNames?.valueText })}>
                  {valueText}
                </span>
              )}
            </div>
          </div>
        </>
      )}
    </AriaProgressBar>
  );
}

export { ProgressBar };