import { useEffect, useMemo, useState } from 'react';

import { IconPlus, IconX } from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack/Stack';

import Drawer from '@material-hu/components/design-system/Drawer';
import List from '@material-hu/components/design-system/List';
import ListItem from '@material-hu/components/design-system/List/components/ListItem';
import { useSnackbar } from '@material-hu/components/design-system/Snackbar';
import Title from '@material-hu/components/design-system/Title';

import { useLokaliseTranslation } from 'src/utils/i18n';

import {
  FIXED_COLUMNS,
  SERVICE_TABLE_COLUMN_TRANSLATION_KEYS,
  SERVICE_TABLE_COLUMNS,
} from '../../constants';
import useServiceTableColumns from '../hooks/useServiceTableColumns';

type Props = {
  disabledColumns: string[];
  open: boolean;
  onClose: () => void;
};

const TOGGLEABLE_COLUMNS = SERVICE_TABLE_COLUMNS.filter(
  col => !FIXED_COLUMNS.includes(col),
);

const ColumnConfigDrawer = ({ disabledColumns, open, onClose }: Props) => {
  const { t } = useLokaliseTranslation('service_management');
  const { updateDisabledColumnsMutation } = useServiceTableColumns();
  const { enqueueSnackbar } = useSnackbar();

  const [localDisabledColumns, setLocalDisabledColumns] =
    useState<string[]>(disabledColumns);

  useEffect(() => {
    if (open) {
      setLocalDisabledColumns(disabledColumns);
    }
  }, [open, disabledColumns]);

  const localVisibleColumns = useMemo(
    () => TOGGLEABLE_COLUMNS.filter(col => !localDisabledColumns.includes(col)),
    [localDisabledColumns],
  );

  const localHiddenColumns = useMemo(
    () => TOGGLEABLE_COLUMNS.filter(col => localDisabledColumns.includes(col)),
    [localDisabledColumns],
  );

  const hasChanges = useMemo(() => {
    if (localDisabledColumns.length !== disabledColumns.length) return true;
    return (
      localDisabledColumns.some(col => !disabledColumns.includes(col)) ||
      disabledColumns.some(col => !localDisabledColumns.includes(col))
    );
  }, [localDisabledColumns, disabledColumns]);

  const handleToggleColumn = (column: string) => {
    setLocalDisabledColumns(prev =>
      prev.includes(column)
        ? prev.filter(col => col !== column)
        : [...prev, column],
    );
  };

  const handleApplyChanges = () => {
    updateDisabledColumnsMutation.mutate(localDisabledColumns, {
      onSuccess: () => {
        enqueueSnackbar({
          title: t('column_config_success'),
          variant: 'success',
        });
        onClose();
      },
      onError: () => {
        enqueueSnackbar({
          title: t('column_config_error'),
          description: t('try_again_later'),
          variant: 'error',
        });
      },
    });
  };

  return (
    <Drawer
      open={open}
      onClose={onClose}
      title={t('configure_columns')}
      primaryButtonProps={{
        children: t('general:apply'),
        onClick: handleApplyChanges,
        loading: updateDisabledColumnsMutation.isLoading,
        disabled: !hasChanges,
        fullWidth: true,
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        onClick: onClose,
        disabled: updateDisabledColumnsMutation.isLoading,
        fullWidth: true,
      }}
    >
      <Stack>
        <Stack sx={{ gap: 1 }}>
          <Title
            title={t('visible_columns')}
            variant="S"
          />
          <List sx={{ backgroundColor: 'transparent' }}>
            <Stack sx={{ gap: 1 }}>
              <ListItem
                text={{
                  title: t('service_item'),
                }}
                disabled
                sidePill={{
                  label: t('mandatory_column'),
                  type: 'neutral',
                }}
                sx={{
                  backgroundColor: ({ palette }) =>
                    palette.new.background.elements.grey,
                  borderRadius: ({ shape }) => shape.borderRadiusL,
                  '& .MuiTypography-root': {
                    color: ({ palette }) => palette.new.text.neutral.disabled,
                  },
                }}
              />
              {localVisibleColumns.map(column => (
                <ListItem
                  key={column}
                  text={{
                    title: t(SERVICE_TABLE_COLUMN_TRANSLATION_KEYS[column]),
                  }}
                  action={{
                    Icon: IconX,
                    onClick: () => handleToggleColumn(column),
                  }}
                  sx={{
                    backgroundColor: ({ palette }) =>
                      palette.new.background.elements.grey,
                    borderRadius: ({ shape }) => shape.borderRadiusL,
                  }}
                />
              ))}
            </Stack>
          </List>
          {localHiddenColumns.length > 0 && <Divider sx={{ my: 2 }} />}
        </Stack>
        {localHiddenColumns.length > 0 && (
          <Stack sx={{ gap: 1 }}>
            <Title
              title={t('available_columns')}
              variant="S"
            />
            <List sx={{ backgroundColor: 'transparent' }}>
              <Stack sx={{ gap: 1 }}>
                {localHiddenColumns.map(column => (
                  <ListItem
                    key={column}
                    text={{
                      title: t(SERVICE_TABLE_COLUMN_TRANSLATION_KEYS[column]),
                    }}
                    action={{
                      Icon: IconPlus,
                      onClick: () => handleToggleColumn(column),
                    }}
                    sx={{
                      backgroundColor: ({ palette }) =>
                        palette.new.background.elements.grey,
                      borderRadius: ({ shape }) => shape.borderRadiusL,
                    }}
                  />
                ))}
              </Stack>
            </List>
          </Stack>
        )}
      </Stack>
    </Drawer>
  );
};

export default ColumnConfigDrawer;