import { ProColumns, ProTable } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Typography } from 'antd';

interface TripCostTableProps {
  tripCosts: SgwModel.TripCost[];
}

const TripCostTable: React.FC<TripCostTableProps> = ({ tripCosts }) => {
  const intl = useIntl();
  // Tính tổng chi phí
  const total_trip_cost = tripCosts.reduce(
    (sum, item) => sum + (Number(item.total_cost) || 0),
    0,
  );
  const trip_cost_columns: ProColumns<SgwModel.TripCost>[] = [
    {
      key: 'type',
      title: (
        <div style={{ textAlign: 'center' }}>
          {intl.formatMessage({ id: 'trip.cost.type' })}
        </div>
      ),
      dataIndex: 'type',
      valueEnum: {
        fuel: { text: intl.formatMessage({ id: 'trip.cost.fuel' }) },
        crew_salary: {
          text: intl.formatMessage({ id: 'trip.cost.crewSalary' }),
        },
        food: { text: intl.formatMessage({ id: 'trip.cost.food' }) },
        ice_salt_cost: {
          text: intl.formatMessage({ id: 'trip.cost.iceSalt' }),
        },
      },
      align: 'center',
    },
    {
      key: 'amount',
      title: (
        <div style={{ textAlign: 'center' }}>
          {intl.formatMessage({ id: 'trip.cost.amount' })}
        </div>
      ),
      dataIndex: 'amount',
      align: 'center',
    },
    {
      key: 'unit',
      title: (
        <div style={{ textAlign: 'center' }}>
          {intl.formatMessage({ id: 'trip.cost.unit' })}
        </div>
      ),
      dataIndex: 'unit',
      align: 'center',
    },
    {
      key: 'cost_per_unit',
      title: (
        <div style={{ textAlign: 'center' }}>
          {intl.formatMessage({ id: 'trip.cost.price' })}
        </div>
      ),
      dataIndex: 'cost_per_unit',
      align: 'center',
      render: (val: any) => (val ? Number(val).toLocaleString() : ''),
    },
    {
      key: 'total_cost',
      title: (
        <div style={{ textAlign: 'center' }}>
          {intl.formatMessage({ id: 'trip.cost.total' })}
        </div>
      ),
      dataIndex: 'total_cost',
      align: 'center',
      render: (val: any) =>
        val ? (
          <b style={{ color: '#fa541c' }}>{Number(val).toLocaleString()}</b>
        ) : (
          ''
        ),
    },
  ];
  return (
    <ProTable<SgwModel.TripCost>
      rowKey="trip-cost-table"
      columns={trip_cost_columns}
      dataSource={tripCosts}
      search={false}
      pagination={{
        pageSize: 5,
        showSizeChanger: true,
        showTotal: (total, range) => `${range[0]}-${range[1]} trên ${total}`,
      }}
      options={false}
      // bordered
      size="middle"
      scroll={{ x: '100%' }}
      style={{ flex: 1, width: '100%' }}
      summary={() => (
        <ProTable.Summary.Row>
          <ProTable.Summary.Cell index={0} colSpan={4} align="right">
            <Typography.Text strong style={{ color: '#1890ff' }}>
              {intl.formatMessage({ id: 'trip.cost.grandTotal' })}
            </Typography.Text>
          </ProTable.Summary.Cell>
          <ProTable.Summary.Cell index={4} align="center">
            <Typography.Text strong style={{ color: '#fa541c', fontSize: 16 }}>
              {total_trip_cost.toLocaleString()}
            </Typography.Text>
          </ProTable.Summary.Cell>
        </ProTable.Summary.Row>
      )}
    />
  );
};

export default TripCostTable;
