import { Space, Statistic } from 'antd';
import React from 'react';
import { useTranslation } from 'react-i18next';
import Dinero from 'dinero.js';

export default function JobCostingStatistics({ summaryData, onlyGP }) {
  const { t } = useTranslation();

  const gpTotals = (
    <>
      <Space wrap direction="horizontal" size={'large'}>
        <Statistic
          value={Dinero(summaryData.totalSales).toFormat()}
          title={t('jobs.labels.total_sales')}
        />
        <Statistic
          value={Dinero(summaryData.totalCost).toFormat()}
          title={t('jobs.labels.total_cost')}
        />
      </Space>{' '}
      <Space wrap direction="horizontal" size={'large'}>
        <Statistic
          value={Dinero(summaryData.gpdollars).toFormat()}
          title={t('jobs.labels.gpdollars')}
        />
        <Statistic value={summaryData.gppercentFormatted} title={t('jobs.labels.gppercent')} />
      </Space>
    </>
  );

  if (onlyGP) return gpTotals;

  return (
    <div>
      <div className="imex-flex-row imex-flex-row__flex-space-around">
        <Statistic value={Dinero(summaryData.totalLaborSales).toFormat()} title={t("jobs.labels.sale_labor")} />
        <Statistic value={Dinero(summaryData.totalPartsSales).toFormat()} title={t("jobs.labels.sale_parts")} />
        <Statistic value={Dinero(summaryData.totalSubletSales).toFormat()} title={t("jobs.labels.sale_sublet")} />
        <Statistic
          value={Dinero(summaryData.totalAdditionalSales).toFormat()}
          title={t("jobs.labels.sale_additional")}
        />
        <Statistic value={Dinero(summaryData.totalSales).toFormat()} title={t("jobs.labels.total_sales")} />
        <Statistic value={Dinero(summaryData.totalLaborCost).toFormat()} title={t("jobs.labels.cost_labor")} />
        <Statistic value={Dinero(summaryData.totalPartsCost).toFormat()} title={t("jobs.labels.cost_parts")} />
        <Statistic value={Dinero(summaryData.totalSubletCost).toFormat()} title={t("jobs.labels.cost_sublet")} />
        <Statistic
          value={Dinero(summaryData.totalAdditionalCost).toFormat()}
          title={t("jobs.labels.cost_Additional")}
        />
        <Statistic value={Dinero(summaryData.totalCost).toFormat()} title={t("jobs.labels.total_cost")} />
        <Statistic value={Dinero(summaryData.gpdollars).toFormat()} title={t("jobs.labels.gpdollars")} />
        <Statistic value={summaryData.gppercentFormatted} title={t("jobs.labels.gppercent")} />
      </div>
    </div>
  );
}
