import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid-premium';
import Chip from '@mui/material/Chip';
import Box from '@mui/material/Box';
import {
  formatCurrency,
  formatDate,
  getStatusColor,
  getStatusLabel,
} from '../../utils/orderFormatters';

const TextCell = ({ value }: { value: string | null | undefined }) => (
  <Box
    sx={{
      whiteSpace: 'normal',
      wordBreak: 'break-word',
      lineHeight: 1.3,
      py: 0.5,
    }}
  >
    {value ?? ''}
  </Box>
);

export const createInformationPanelColumns = (): GridColDef[] => [
  {
    field: 'customerName',
    headerName: 'Cliente',
    minWidth: 180,
    flex: 1.5,
    description: 'Nome do cliente do pedido',
    renderCell: (params: GridRenderCellParams) => <TextCell value={params.value} />,
  },
  {
    field: 'storeId',
    headerName: 'Filial',
    width: 60,
    align: 'center',
    headerAlign: 'center',
    description: 'Código da filial',
  },
  {
    field: 'createDate',
    headerName: 'Data Criação',
    width: 95,
    align: 'center',
    headerAlign: 'center',
    description: 'Data de criação do pedido',
    valueFormatter: (value) => formatDate(value as string),
  },
  {
    field: 'status',
    headerName: 'Situação',
    width: 90,
    align: 'center',
    headerAlign: 'center',
    description: 'Situação atual do pedido',
    renderCell: (params: Readonly<GridRenderCellParams>) => (
      <Chip
        label={getStatusLabel(params.value as string)}
        size="small"
        color={getStatusColor(params.value as string)}
        variant="outlined"
        sx={{ height: 22, fontSize: '0.7rem' }}
      />
    ),
  },
  {
    field: 'paymentName',
    headerName: 'Forma Pgto',
    minWidth: 100,
    flex: 1,
    description: 'Forma de pagamento utilizada',
    renderCell: (params: GridRenderCellParams) => <TextCell value={params.value} />,
  },
  {
    field: 'billingName',
    headerName: 'Cond. Pgto',
    minWidth: 100,
    flex: 1,
    description: 'Condição de pagamento',
    renderCell: (params: GridRenderCellParams) => <TextCell value={params.value} />,
  },
  {
    field: 'amount',
    headerName: 'Valor',
    width: 100,
    align: 'right',
    headerAlign: 'right',
    description: 'Valor total do pedido',
    valueFormatter: (value) => formatCurrency(value as number),
  },
  {
    field: 'deliveryType',
    headerName: 'Tipo Entrega',
    minWidth: 100,
    flex: 1,
    description: 'Tipo de entrega selecionado',
    renderCell: (params: GridRenderCellParams) => <TextCell value={params.value} />,
  },
  {
    field: 'deliveryLocal',
    headerName: 'Local Entrega',
    minWidth: 120,
    flex: 1.2,
    description: 'Local de entrega do pedido',
    renderCell: (params: GridRenderCellParams) => <TextCell value={params.value} />,
  },
];