import React from 'react';
import MultiTypeChart from './truckRatesComponents/multitypeChart';
import util from '../lib/util';
import { RateData, TruckRatesTranslatedWords } from './truckRatesComponents/type';
import constants from '../lib/common/constants';

interface Props {
  period: number
  selectedTruckType: string;
  rateData: RateData[];
  showRatePerTon: boolean;
  onPeriodChange: Function;
  translatedWords?: TruckRatesTranslatedWords
}

export const DailyRates = (props: Props) => {
  const { rateData, onPeriodChange, showRatePerTon, period: _period, selectedTruckType, translatedWords } = props;
  const {
    tonAbbrev = 'Ton.',
    minAbbrev = 'Min.',
    maxAbbrev = 'Max.',
    avgAbbrev = 'Avg.',
    ratePerTonAbbrev = 'Rate per ton.',
  } = translatedWords || {}
  const [period, setPeriod] = React.useState<number>(_period || 365);

  const transport_service = selectedTruckType as keyof typeof constants.tonType;
  const averageTon = constants.tonType[transport_service]?.ton || 15;

  const noRates = !rateData?.length;
  const frieght = rateData?.map((d: any) => d.customer_price);
  const rateSum = frieght?.reduce((a: number, v: number) => a + v, 0);

  const avgRate = noRates
    ? 0
    : (Math.round(rateSum / rateData?.length / 100) * 100).toFixed(0);
  const minRate = noRates ? 0 : Math.min(...frieght);
  const maxRate = noRates ? 0 : Math.max(...frieght);
  const handleItemChange = (value: number) => {
    setPeriod(value);
    onPeriodChange(value)
  };

  const periodFilter = [
    { id: '1Y', value: 365 },
    { id: '6M', value: 180 },
    { id: '1M', value: 30 },
  ];

  return (
    <div className="daily-rates-div md:daily-rates-div">
      <div id="dailyRates" className="fr-w-full fr-border fr-border-slate-200 fr-rounded-md">
        <div className="sm:fr-flex sm:fr-flex-wrap fr-p-1 fr-border-b fr-border-slate-200 fr-justify-between fr-items-center fr-font-medium">
          <div className="fr-flex fr-items-center fr-justify-center">
            <ul className="fr-flex fr-gap-3 fr-ml-3 -fr-mb-1 md:fr-mb-0 fr-list-none fr-m-0">
              {periodFilter.map((p: { id: string; value: number }) => {
                return (
                  <li
                    key={p.id}
                    className={`${
                      period === p.value
                        ? 'fr-text-blue-600 btn-border-b fr-border-blue-600'
                        : 'fr-cursor-pointer btn-border-b fr-border-transparent'
                    } fr-rounded-sm btn-anime fr-text-base`}
                    onClick={() => handleItemChange(p.value)}
                  >
                    {p.id}
                  </li>
                );
              })}
            </ul>
          </div>
          {noRates ? null : (
            <div className="fr-text-center fr-bg-slate-50 fr-p-1 sm:fr-text-right sm:fr-w-auto sm:fr-bg-white sm:fr-p-0 fr-text-xs sm:fr-text-sm">
              <span className="fr-text-slate-500 fr-text-xs">{tonAbbrev}</span>
              {averageTon}
              <span className="fr-text-slate-200">&nbsp;|&nbsp;</span>
              <span className="fr-text-slate-500 fr-text-xs">{minAbbrev}</span>₹{minRate}
              <span className="fr-text-slate-200">&nbsp;|&nbsp;</span>
              <span className="fr-text-slate-500 fr-text-xs">{maxAbbrev}</span>₹{maxRate}
              <span className="fr-text-slate-200">&nbsp;|&nbsp;</span>
              {showRatePerTon && <br className='sm:fr-hidden fr-visible' />}
              <span className="fr-text-slate-500 fr-text-xs">{avgAbbrev}</span>₹{avgRate}
              {showRatePerTon && (
                <>
                  <span className="fr-text-slate-200">&nbsp;|&nbsp;</span>
                  <span className="fr-text-slate-500 fr-text-xs">{ratePerTonAbbrev}</span>₹
                  {util.roundedBy50(Number(avgRate) / averageTon) || ''}
                </>
              )}
            </div>
          )}
        </div>
        <div className="fr-h-240px fr-p-1">
          <MultiTypeChart rateData={rateData} days={period} />
        </div>
      </div>
    </div>
  );
};