import React, { useEffect, useState } from 'react';
import { List, Modal, Switch, Button } from 'antd';
import { MenuOutlined } from '@ant-design/icons';
import type { DragEndEvent } from '@dnd-kit/core';
import { DndContext } from '@dnd-kit/core';
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
import {
  arrayMove,
  SortableContext,
  useSortable,
  verticalListSortingStrategy,
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { VISIBLE_COLUMNS } from '@/app/enquiries/constant';
import { VisibleColumnsI } from '@/app/enquiries/interface';

interface ExportModalProps {
    visibleColumns: VisibleColumnsI
    setVisibleColumns: (value: VisibleColumnsI) => void
    showHideColumnModal: boolean
    handleCloseModal: () => void
    selectedMenuItem: string
}
interface Column {
  key: string;
  isVisible: boolean;
  title: string;
}
const ColumnHideShowModal: React.FC<ExportModalProps> = ({
  visibleColumns,
  setVisibleColumns,
  showHideColumnModal,
  handleCloseModal,
  selectedMenuItem,
}) => {
  const [dataSource, setDataSource] = useState<Column[]>(visibleColumns[selectedMenuItem]);

    interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
        'data-row-key': string
        entry: { isVisible: boolean; title: string; key: string }
    }

    useEffect(() => {
      setDataSource(visibleColumns[selectedMenuItem]);
    }, [selectedMenuItem, JSON.stringify(visibleColumns), showHideColumnModal]);

    const Row = ({ ...props }: RowProps) => {
      const {
        attributes,
        listeners,
        setNodeRef,
        setActivatorNodeRef,
        transform,
        transition,
        isDragging,
      } = useSortable({
        id: props['data-row-key'],
      });

      const style: React.CSSProperties = {
        ...props.style,
        transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 }),
        transition,
        ...(isDragging ? { position: 'relative', zIndex: 9999 } : {}),
      };

      const updateVisibleColumns = (key: string, value: boolean): void => {
        setDataSource((prevVisibleColumns: Column[]) =>
          prevVisibleColumns?.map((column) =>
            column?.key === key ? { ...column, isVisible: value } : column
          )
        );
      };

      return (
        <List.Item {...props} ref={setNodeRef} style={style} {...attributes}>
          <List.Item.Meta
            avatar={
              <MenuOutlined
                ref={setActivatorNodeRef}
                style={{ touchAction: 'none', cursor: 'move' }}
                {...listeners}
              />
            }
            title={<div>{props?.entry?.title}</div>}
          />
          <div>
            <Switch
              checked={props?.entry?.isVisible}
              onChange={(checked) => {
                updateVisibleColumns(props?.entry?.key, checked);
              }}
            />
          </div>
        </List.Item>
      );
    };

    const handleOk = () => {
      visibleColumns[selectedMenuItem] = dataSource;
      setVisibleColumns(visibleColumns);
      window.localStorage.setItem('leadsColumns', JSON.stringify(visibleColumns));
      handleCloseModal();
    };

    const handleReset = () => {
      setDataSource(VISIBLE_COLUMNS[selectedMenuItem as keyof typeof VISIBLE_COLUMNS ]);
    };

    const onDragEnd = ({ active, over }: DragEndEvent) => {
      if (active.id !== over?.id) {
        setDataSource((previous: Column[]) => {
          const activeIndex = previous.findIndex((i) => i.key === active.id);
          const overIndex = previous.findIndex((i) => i.key === over?.id);
          return arrayMove(previous, activeIndex, overIndex);
        });
      }
    };
    return (
      <Modal
        title="Column Visibility"
        open={showHideColumnModal} // Change 'open' to 'visible'
        onCancel={handleCloseModal}
        footer={[
          <Button key="2" onClick={handleCloseModal}>Cancel</Button>,
          <Button key="3"  type="primary" ghost onClick={handleReset}>
                  Reset Columns
          </Button>,
          <Button key="1" type="primary" onClick={handleOk}>Apply</Button>,
        ]}

        className="custom-new-modal">
        <DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
          <SortableContext
            items={dataSource?.map((i) => i.key)}
            strategy={verticalListSortingStrategy}>
            <List>
              {dataSource?.map((entry, index: number) => (
                <Row data-row-key={entry.key} entry={entry} key={`${index}`} />
              ))}
            </List>
          </SortableContext>
        </DndContext>
      </Modal>
    );
};

export default ColumnHideShowModal;