tableee

import React from 'react';
import {
    IconButton,
    Stack,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow,
    Tooltip,
    Typography,
    Switch,
    TableContainer,
} from '@mui/material';
import { observer } from 'mobx-react-lite';
import { useTranslation } from 'react-i18next';
import { ProductMaterial } from '../../models/entities/product-material';
import LinkIcon from '@mui/icons-material/Link';
import LinkOffIcon from '@mui/icons-material/LinkOff';
import InfoIcon from '@mui/icons-material/Info';
import { useRootStore } from '../../providers/root-store-provider';
import { CurrencyEnum, LocaleEnum, Price } from 'common';
import { MaterialsListDialog } from 'components/dialogs/materials-list-dialog';
import { Material } from 'models/entities/material';
import { Product } from 'models/entities/product';

interface ProductMaterialsDetailTableProps {
    productMaterials: ProductMaterial[];
    row: Product;
    materials: Material[];
}

export const ProductMaterialsDetailTable: React.FC<ProductMaterialsDetailTableProps> = observer(
    ({ productMaterials, row, materials }) => {
        const { t } = useTranslation('web');
        const rootStore = useRootStore();
        const productStore = rootStore.productStore;

        const findCurrency = (language: LocaleEnum): CurrencyEnum => {
            switch (language) {
                case LocaleEnum.cz:
                    return CurrencyEnum.CZK;
                case LocaleEnum.sk:
                    return CurrencyEnum.EUR;
                case LocaleEnum.pl:
                    return CurrencyEnum.PLN;
                case LocaleEnum.de:
                    return CurrencyEnum.EUR;
                default:
                    throw new Error('Unsupported language');
            }
        };

        return (
            <TableContainer
                sx={{
                    border: (theme) => `1px solid ${theme.palette.divider}`,
                    borderRadius: '4px',
                    width: 'fit-content',
                    minWidth: '385px',
                    overflow: 'hidden',
                }}
            >
                <Table
                    size="small"
                    sx={{
                        '& .MuiTableCell-root': {
                            fontSize: '0.75rem',
                            lineHeight: '155%',
                            letterSpacing: '0.15px',
                            padding: '5px',
                            height: '19px',
                            whiteSpace: 'nowrap',
                            verticalAlign: 'bottom',
                            borderRight: (theme) => `1px solid ${theme.palette.divider}`,
                            '&:last-child': {
                                borderRight: 'none',
                            },
                        },
                        '& .MuiTableHead-root .MuiTableCell-root': {
                            fontWeight: 700,
                        },
                        '& .MuiTableBody-root tr:last-child td': {
                            borderBottom: 'none',
                        },
                        '& .toggle-cell': {
                            width: '50px',
                            padding: '0px 5px',
                            textAlign: 'left',
                            '& .MuiSwitch-root': {
                                margin: '-4px',
                            },
                        },
                        '& .MuiSvgIcon-root.info-icon': { fontSize: '1.25rem' },
                        '& .MuiSvgIcon-root.edit-icon': { fontSize: '1rem' },
                    }}
                >
                    <TableHead>
                        <TableRow>
                            <TableCell>{t('pages.index.productMaterialsDetail.shopsysId')}</TableCell>
                            <TableCell>{t('pages.index.productMaterialsDetail.priceExcludingVat')}</TableCell>
                            <TableCell width={50}>{t('pages.index.productMaterialsDetail.inSale')}</TableCell>
                            <TableCell>
                                <Stack direction="row" alignItems="center" justifyContent="space-between">
                                    {t('pages.index.productMaterialsDetail.material')}
                                    <MaterialsListDialog product={row} materials={materials} />
                                </Stack>
                            </TableCell>
                            <TableCell width={20} />
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {productMaterials.map((material) => (
                            <TableRow key={material.shopsysId}>
                                <TableCell>{material.shopsysId}</TableCell>
                                <TableCell>
                                    <Stack direction="row" alignItems="center" justifyContent={'space-between'}>
                                        {`${material.prices[0]?.price || 0} Kč`}
                                        <Tooltip
                                            placement="left"
                                            title={
                                                <>
                                                    <Typography variant="button" gutterBottom>
                                                        {t('pages.index.productMaterialsDetail.tooltips.prices.title')}
                                                    </Typography>
                                                    <table>
                                                        <thead>
                                                            <tr>
                                                                <th />
                                                                <th>
                                                                    {t(
                                                                        'pages.index.productMaterialsDetail.tooltips.prices.excludingVat',
                                                                    )}
                                                                </th>
                                                                <th>
                                                                    {t(
                                                                        'pages.index.productMaterialsDetail.tooltips.prices.vat',
                                                                    )}
                                                                </th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            {material.prices.map((p: Price) => (
                                                                <tr key={p.languageCode}>
                                                                    <td>
                                                                        <b>{p.languageCode}</b>
                                                                    </td>
                                                                    <td>
                                                                        {p.price}
                                                                        <Typography
                                                                            fontSize="smaller"
                                                                            sx={{ ml: 1 }}
                                                                            component="span"
                                                                        >
                                                                            {findCurrency(p.languageCode)}
                                                                        </Typography>
                                                                    </td>
                                                                    <td>
                                                                        {p.priceVat}
                                                                        <Typography
                                                                            fontSize="smaller"
                                                                            sx={{ ml: 1 }}
                                                                            component="span"
                                                                        >
                                                                            {findCurrency(p.languageCode)}
                                                                        </Typography>
                                                                    </td>
                                                                </tr>
                                                            ))}
                                                        </tbody>
                                                    </table>
                                                </>
                                            }
                                        >
                                            <InfoIcon className="info-icon" color="secondary" />
                                        </Tooltip>
                                    </Stack>
                                </TableCell>
                                <TableCell className="toggle-cell">
                                    <Switch
                                        checked={material.isSaleActive}
                                        /*  onChange={() => productStore.toggleProductMaterialSaleStatus(material)} */
                                        color="secondary"
                                    />
                                    {/* TODO: add method for this */}
                                </TableCell>
                                <TableCell className="text-cell">{material.material?.code}</TableCell>
                                <TableCell className="button-cell">
                                    <IconButton
                                        size="small"
                                        sx={{
                                            width: 20,
                                            height: 20,
                                        }}
                                        href={material.eshopUrl || ''}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        disabled={!material.eshopUrl}
                                    >
                                        {/* TODO: add tool tip with links */}
                                        {material.eshopUrl ? (
                                            <LinkIcon className="link-icon" color="secondary" />
                                        ) : (
                                            <LinkOffIcon className="link-icon" color="disabled" />
                                        )}
                                    </IconButton>
                                </TableCell>
                            </TableRow>
                        ))}{' '}
                    </TableBody>
                </Table>
            </TableContainer>
        );
    },
);