import React, { useCallback, useMemo } from 'react';
import { SoundboardPackEditor } from './SoundboardPackEditor';
import { SoundboardContent, SoundboardPack } from '../../plugins/soundboard';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { AccountDataEvent } from '../../../types/matrix/accountData';
import { useUserSoundboardPack } from '../../hooks/useSoundboardPacks';

export function UserSoundboardPack() {
  const mx = useMatrixClient();
  const defaultPack = useMemo(
    () =>
      new SoundboardPack(
        mx.getUserId() ?? '',
        { pack: { display_name: 'My Soundboard' } },
        undefined,
      ),
    [mx],
  );
  const pack = useUserSoundboardPack() ?? defaultPack;

  const handleUpdate = useCallback(
    async (content: SoundboardContent) => {
      await mx.setAccountData(
        AccountDataEvent.LotusSoundboard as unknown as keyof import('matrix-js-sdk').AccountDataEvents,
        content as never,
      );
    },
    [mx],
  );

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