import { useTitle } from 'components/easyUse';
import React from 'react';
import { useSelector } from 'react-redux';
import { getScreenId } from 'utils/screen';
import ScreenDetail from './components/screenDetail';
import { ScreensById } from 'models/screen.types';
import { screenDetailType } from 'models/screen-detail';
import ScreenDebugContainer from '../screen-preview-debug';

const ScreenDetailPage = () => {
  const screenId = getScreenId();
  const screenDetail = useSelector(
    (state: { screenDetail: screenDetailType }) => state.screenDetail,
  );
  const screensById = useSelector((state: { screensById: ScreensById }) => state.screensById);
  const { id } = screenDetail;

  const { name = 'Loading' } = (id && screensById?.[id]) || {};
  useTitle(name);

  return (
    <ScreenDebugContainer>
      <ScreenDetail screenId={screenId} />
    </ScreenDebugContainer>
  );
};

export default ScreenDetailPage;
