import React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Paper from '@mui/material/Paper';
import { Trans, t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { MobileDeviceData } from '../../types';

interface IconSelectionTabProps {
  deviceData: MobileDeviceData;
  availableIcons: string[];
  onDataChange: (updates: Partial<MobileDeviceData>) => void;
}

const IconSelectionTab: React.FC<IconSelectionTabProps> = ({
  deviceData,
  availableIcons,
  onDataChange,
}) => {
  const { i18n } = useLingui();

  const iconKeys = [
    { key: 'mcl_inf', label: i18n._(t`Icon 1`), pngKey: 'mcl_infpng' },
    { key: 'mcl_bst', label: i18n._(t`Icon 2`), pngKey: 'mcl_bstpng' },
    { key: 'mcl_str', label: i18n._(t`Icon 3`), pngKey: 'mcl_strpng' },
    { key: 'mcl_all', label: i18n._(t`Icon 4`), pngKey: 'mcl_allpng' },
    { key: 'mcl_i05', label: i18n._(t`Icon 5`), pngKey: 'mcl_i05png' },
    { key: 'mcl_i06', label: i18n._(t`Icon 6`), pngKey: 'mcl_i06png' },
  ];

  const handleIconChange = (pngKey: string, value: string) => {
    if (deviceData.parameters) {
      onDataChange({
        parameters: {
          ...deviceData.parameters,
          [pngKey]: value,
        },
      });
    }
  };

  const getIconValue = (pngKey: string): string => {
    return deviceData.parameters?.[pngKey as keyof typeof deviceData.parameters] || '';
  };

  return (
    <Box>
      <TableContainer component={Paper} elevation={0} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 2, overflowX: 'auto' }}>
            <Table sx={{ minWidth: 480 }}>
              <TableHead>
                <TableRow sx={{ backgroundColor: 'action.hover' }}>
                  <TableCell sx={{ fontWeight: 600, whiteSpace: 'nowrap' }}>
                    <Trans>Icon-Typ</Trans>
                  </TableCell>
                  <TableCell align="center" sx={{ fontWeight: 600, whiteSpace: 'nowrap' }}>
                    <Trans>Vorschau</Trans>
                  </TableCell>
                  <TableCell sx={{ fontWeight: 600 }}>
                    <Trans>Icon auswählen</Trans>
                  </TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {iconKeys.map((icon, index) => {
                  const currentIcon = getIconValue(icon.pngKey);
                  return (
                    <TableRow
                      key={icon.key}
                      sx={{
                        '&:hover': { backgroundColor: 'action.hover' },
                        transition: 'background-color 0.2s ease',
                      }}
                    >
                      <TableCell>
                        <Typography variant="body1" fontWeight={600} sx={{ whiteSpace: 'nowrap' }}>
                          {icon.label}
                        </Typography>
                      </TableCell>
                      <TableCell align="center">
                        {currentIcon && (
                          <Box
                            component="img"
                            src={`/imgtasko/icons/${currentIcon}`}
                            alt={icon.label}
                            sx={{
                              width: 40,
                              height: 40,
                              objectFit: 'contain',
                            }}
                          />
                        )}
                      </TableCell>
                      <TableCell>
                        <FormControl fullWidth size="small">
                          <Select
                            value={currentIcon}
                            onChange={(e) => handleIconChange(icon.pngKey, e.target.value)}
                            sx={{ borderRadius: '8px' }}
                          >
                            {availableIcons.map((iconFile) => (
                              <MenuItem key={iconFile} value={iconFile}>
                                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, minWidth: 0 }}>
                                  <Box
                                    component="img"
                                    src={`/imgtasko/icons/${iconFile}`}
                                    alt={iconFile}
                                    sx={{ width: 24, height: 24, objectFit: 'contain', flexShrink: 0 }}
                                  />
                                  <Box component="span" sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                                    {iconFile}
                                  </Box>
                                </Box>
                              </MenuItem>
                            ))}
                          </Select>
                        </FormControl>
                      </TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
      </TableContainer>
    </Box>
  );
};

export default IconSelectionTab;