import { PdfFile } from '../../types/drawing.ts'
import { Box } from '@mui/material'
import PdfItem from './PdfItem.tsx'
import { MarkConfig, MarkConfigDetails } from '../../types/mark.ts'
import { State } from '../../store/rootReducer'
import { useSelector } from 'react-redux';
import { hexToNpub, npubToHex } from '../../utils'

interface PdfViewProps {
  files: { [filename: string]: PdfFile },
  fileHashes: { [key: string]: string | null },
  markConfig: MarkConfig,
}

const PdfView = (props: PdfViewProps) => {
  console.log('current file hashes: ', props.fileHashes)
  const usersPubkey = useSelector((state: State) => state.auth.usersPubkey);
  if (!usersPubkey) return;
  console.log(props.markConfig[hexToNpub(usersPubkey)]);

  console.log('users pubkey: ', usersPubkey);
  console.log('mark config: ', props.markConfig);

  const getMarkConfigDetails = (fileName: string): MarkConfigDetails[] | undefined => {
    const fileHash = props.fileHashes[fileName];
    if (!fileHash) return;
    return props.markConfig[hexToNpub(usersPubkey)][fileHash];
  }
  const { files } = props;
  return (
    <Box>
      {Object.entries(files)
        .filter(([name]) => !!getMarkConfigDetails(name))
        .map(([name, file], i) => (
          <PdfItem
            pdfFile={file}
            key={i}
            markConfigDetails={getMarkConfigDetails(name) as MarkConfigDetails[]} />
        ))}
    </Box>
  )

}

export default PdfView;