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

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

const TripCostTable: React.FC<TripCostTableProps> = ({ tripCosts }) => {
  // 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<API.TripCost>[] = [
    {
      title: <div style={{ textAlign: 'center' }}>Loại</div>,
      dataIndex: 'type',
      valueEnum: {
        fuel: { text: 'Nhiên liệu' },
        crew_salary: { text: 'Lương thuyền viên' },
        food: { text: 'Lương thực' },
        ice_salt_cost: { text: 'Muối đá' },
      },
      align: 'center',
    },
    {
      title: <div style={{ textAlign: 'center' }}>Số lượng</div>,
      dataIndex: 'amount',
      align: 'center',
    },
    {
      title: <div style={{ textAlign: 'center' }}>Đơn vị</div>,
      dataIndex: 'unit',
      align: 'center',
    },
    {
      title: <div style={{ textAlign: 'center' }}>Chi phí</div>,
      dataIndex: 'cost_per_unit',
      align: 'center',
      render: (val: any) => (val ? Number(val).toLocaleString() : ''),
    },
    {
      title: <div style={{ textAlign: 'center' }}>Tổng chi phí</div>,
      dataIndex: 'total_cost',
      align: 'center',
      render: (val: any) =>
        val ? (
          <b style={{ color: '#fa541c' }}>{Number(val).toLocaleString()}</b>
        ) : (
          ''
        ),
    },
  ];
  const { useBreakpoint } = Grid;
  const screens = useBreakpoint();
  return (
    <ProTable<API.TripCost>
      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' }}>
              Tổng cộng
            </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;
