cinny/src/app/components/soundboard-pack-view/RoomSoundboardPack.tsx

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 { sendStateEvent } from '../../utils/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 sendStateEvent(mx, room.roomId, StateEvent.LotusSoundboardRoom, content, stateKey);
    },
    [mx, room.roomId, stateKey],
  );

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