import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Routes, Route, useLocation, useParams } from 'react-router-dom';
import styled from '@emotion/styled';
import Box from '@mui/material/Box';
import { useBlockletContext } from '../../contexts/blocklet';
import ProjectList from './project-list';
import ReleasesList from './release-list';
import CreateRelease from './create-release';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function BlockletPublish({
  padding = '',
  initUrl = null
}) {
  const {
    blocklet
  } = useBlockletContext();
  const location = useLocation();

  // post message to parent window when route changed
  const {
    componentDid
  } = useParams();
  useEffect(() => {
    if (componentDid && window.parent) {
      const path = `${location.pathname}${location.search}`;
      window.parent.postMessage({
        event: 'popstate',
        page: 'publish',
        componentDid,
        path
      }, '*');
    }
  }, [componentDid, location]);
  if (!blocklet) {
    return null;
  }
  const style = {};
  if (padding) {
    style.padding = padding;
  }
  return /*#__PURE__*/_jsx(Main, {
    style: style,
    children: /*#__PURE__*/_jsxs(Routes, {
      children: [/*#__PURE__*/_jsx(Route, {
        path: "/",
        element: /*#__PURE__*/_jsx(ProjectList, {
          initUrl: initUrl
        })
      }), /*#__PURE__*/_jsx(Route, {
        path: "/:projectId",
        element: /*#__PURE__*/_jsx(ReleasesList, {})
      }), /*#__PURE__*/_jsx(Route, {
        path: "/:projectId/:mode/:releaseId/:lastVersion",
        element: /*#__PURE__*/_jsx(CreateRelease, {
          initUrl: initUrl
        })
      })]
    })
  });
}
BlockletPublish.propTypes = {
  padding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  initUrl: PropTypes.object
};
const Main = styled(Box)`
  a {
    color: ${({
  theme
}) => theme.palette.primary.main};
  }
`;