'use client';

import Checkbox from '@mui/material/Checkbox';
import TableCell from '@mui/material/TableCell';
import SvgColor from '@/shared/components/svg-color';
import { TableColumn } from '@/shared/types/common';
import TableActionColumn from '@/shared/components/table/table-action-column';
import { DepartmentList } from '@/shared/types/infrastructure';
import { ContratStyledRow } from '@/shared/sections/contract/styles';
import { alpha, Box } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { useInfrastructureStore } from '@/shared/api/stores/admin-service/infrastructureStore';
import dayjs from 'dayjs';
import ConditionalComponent from '@/shared/components/table/ConditionalComponent';

type Props = {
  handleEdit: (department: DepartmentList) => void;
  handleDetails: (department: DepartmentList) => void;
  handleCopy: (department: DepartmentList) => void;
  selected: boolean;
  row: DepartmentList;
  dense: boolean;
  onSelectRow: VoidFunction;
  columns: TableColumn[];
  handleOpenConsult: (department: DepartmentList) => void;
};

const TOOLTIP_TITLES = {
  active: 'Département activé',
  inactive: 'Département désactivé',
};

export default function DepartmentTableRow({
  dense,
  row,
  handleEdit,
  handleDetails,
  handleCopy,
  selected,
  onSelectRow,
  columns,
  handleOpenConsult,
}: Props) {
  const theme = useTheme();

  const { toggleDepartmentActivation } = useInfrastructureStore();

  const renderCellContent = (columnId: string, value: any) => {
    switch (columnId) {
      case 'createdAt':
        return dayjs(value).format('DD-MM-YYYY HH:mm');
      case 'address':
        return (
          <Box
            sx={{
              maxWidth: '200px',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
              cursor: 'help',
            }}
            title={value} // Tooltip avec l'adresse complète
          >
            {value}
          </Box>
        );
      default:
        return value;
    }
  };

  return (
    <ContratStyledRow
      hover
      style={{
        backgroundColor: selected
          ? alpha(theme.palette.primary.main, 0.1)
          : undefined,
        cursor: 'pointer',
      }}
    >
      {columns.map((column: any,index:number) => (
        <TableCell
          onDoubleClick={() => handleOpenConsult(row)}
          key={column.id}
          align={column.align}
          sx={{ 
            whiteSpace: column.id === 'address' ? 'normal' : 'nowrap', 
            py: dense ? 0 : 2,
            ...(column.id === 'address' && {
              maxWidth: '200px',
              width: '200px',
            }),
            ...(index === 0 && {
              position: 'relative',
            })
          }}
        >
          <ConditionalComponent isValid={index === 0}>
            <SvgColor
              src="/assets/icons/ic_border.svg"
              sx={{
                position: 'absolute',
                top: 0,
                left: -4,
                height: '100%',
                color: row.hexColor ? row.hexColor : theme.palette.primary.main,
              }}
            />
          </ConditionalComponent>
          {renderCellContent(column.id, row[column.id as keyof DepartmentList])}
        </TableCell>
      ))}
      <TableCell sx={{ px: 1, whiteSpace: 'nowrap', py: 0 }}>
        <TableActionColumn
          handleEdit={() => handleEdit(row)}
          onToggle={(checked) => toggleDepartmentActivation(row.id, checked)}
          isActive={row.active}
          tooltipTitles={TOOLTIP_TITLES}
        />
      </TableCell>
    </ContratStyledRow>
  );
}