import React, { ChangeEvent, useState } from 'react';
import FocusTrap from 'focus-trap-react';
import {
  Box,
  config,
  Input,
  Line,
  MenuItem,
  Modal,
  Overlay,
  OverlayBackdrop,
  OverlayCenter,
  Scroll,
  Text,
} from 'folds';
import { MatrixEvent } from 'matrix-js-sdk';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { stopPropagation } from '../../../utils/keyboard';

type Props = {
  mEvent: MatrixEvent;
  onClose: () => void;
};

export function ForwardMessageDialog({ mEvent, onClose }: Props) {
  const mx = useMatrixClient();
  const [query, setQuery] = useState('');
  const [sentTo, setSentTo] = useState<string | null>(null);

  const allRooms = mx
    .getRooms()
    .filter((r) => r.getMyMembership() === 'join' && !r.isSpaceRoom())
    .sort((a, b) => (b.getLastActiveTimestamp() ?? 0) - (a.getLastActiveTimestamp() ?? 0));

  const filtered = query
    ? allRooms.filter((r) => r.name.toLowerCase().includes(query.toLowerCase()))
    : allRooms;

  const forward = (roomId: string, roomName: string) => {
    const fwdContent: Record<string, unknown> = { ...mEvent.getContent() };
    delete fwdContent['m.relates_to'];
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    (mx as any).sendEvent(roomId, mEvent.getType(), fwdContent);
    setSentTo(roomName);
    setTimeout(onClose, 1200);
  };

  return (
    <Overlay open backdrop={<OverlayBackdrop />}>
      <OverlayCenter>
        <FocusTrap
          focusTrapOptions={{
            initialFocus: false,
            onDeactivate: onClose,
            clickOutsideDeactivates: true,
            escapeDeactivates: stopPropagation,
          }}
        >
          <Modal
            size="400"
            style={{
              maxHeight: '440px',
              borderRadius: config.radii.R500,
              display: 'flex',
              flexDirection: 'column',
            }}
          >
            <Box
              direction="Column"
              gap="200"
              shrink="No"
              style={{ padding: config.space.S400, paddingBottom: config.space.S200 }}
            >
              <Text size="H5">Forward message</Text>
              <Input
                variant="Background"
                size="400"
                radii="400"
                outlined
                placeholder="Search rooms…"
                value={query}
                onChange={(e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}
              />
            </Box>
            <Line size="300" />
            {sentTo ? (
              <Box
                grow="Yes"
                alignItems="Center"
                justifyContent="Center"
                style={{ padding: config.space.S400 }}
              >
                <Text size="T300">✓ Forwarded to {sentTo}</Text>
              </Box>
            ) : (
              <Box grow="Yes" style={{ minHeight: 0 }}>
                <Scroll size="300" hideTrack visibility="Hover">
                  <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
                    {filtered.slice(0, 60).map((room) => (
                      <MenuItem
                        key={room.roomId}
                        size="300"
                        radii="300"
                        onClick={() => forward(room.roomId, room.name)}
                      >
                        <Text size="T300" truncate>
                          {room.name}
                        </Text>
                      </MenuItem>
                    ))}
                    {filtered.length === 0 && (
                      <Box
                        alignItems="Center"
                        justifyContent="Center"
                        style={{ padding: config.space.S400 }}
                      >
                        <Text size="T300" priority="300">
                          No rooms found
                        </Text>
                      </Box>
                    )}
                  </Box>
                </Scroll>
              </Box>
            )}
          </Modal>
        </FocusTrap>
      </OverlayCenter>
    </Overlay>
  );
}