import React, { useCallback, useMemo } from 'react';
import { Room } from 'matrix-js-sdk';
import { usePowerLevels } from '../../hooks/usePowerLevels';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { SoundboardPackEditor } from './SoundboardPackEditor';
import { SoundboardContent, SoundboardPack } from '../../plugins/soundboard';
import { StateEvent } from '../../../types/matrix/room';
import { useRoomSoundboardPack } from '../../hooks/useSoundboardPacks';
import { PackAddress } from '../../plugins/custom-emoji/PackAddress';
import { randomStr } from '../../utils/common';
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
import { useRoomCreators } from '../../hooks/useRoomCreators';

type RoomSoundboardPackProps = {
  room: Room;
  stateKey: string;
};

export function RoomSoundboardPack({ room, stateKey }: RoomSoundboardPackProps) {
  const mx = useMatrixClient();
  const userId = mx.getUserId()!;
  const powerLevels = usePowerLevels(room);
  const creators = useRoomCreators(room);
  const permissions = useRoomPermissions(creators, powerLevels);
  const canEdit = permissions.stateEvent(
    StateEvent.LotusSoundboardRoom as unknown as keyof import('matrix-js-sdk').StateEvents,
    userId,
  );

  const fallbackPack = useMemo(
    () => new SoundboardPack(randomStr(4), {}, new PackAddress(room.roomId, stateKey)),
    [room.roomId, stateKey],
  );
  const pack = useRoomSoundboardPack(room, stateKey) ?? fallbackPack;

  const handleUpdate = useCallback(
    async (content: SoundboardContent) => {
      await mx.sendStateEvent(
        room.roomId,
        StateEvent.LotusSoundboardRoom as unknown as keyof import('matrix-js-sdk').StateEvents,
        content as never,
        stateKey,
      );
    },
    [mx, room.roomId, stateKey],
  );

  return <SoundboardPackEditor pack={pack} canEdit={canEdit} onUpdate={handleUpdate} />;
}