@red-hat-developer-hub/backstage-plugin-bulk-import/dist/components/PreviewFile/PreviewFileSidebarDrawerContent.esm.js

import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useState } from 'react';
import { Link } from '@backstage/core-components';
import CloseIcon from '@mui/icons-material/Close';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
import IconButton from '@mui/material/IconButton';
import Skeleton from '@mui/material/Skeleton';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { useTranslation } from '../../hooks/useTranslation.esm.js';
import { RepositorySelection } from '../../types/types.esm.js';
import { urlHelper } from '../../utils/repository-utils.esm.js';
import { PreviewPullRequest } from './PreviewPullRequest.esm.js';
import { PreviewPullRequests } from './PreviewPullRequests.esm.js';

const PreviewFileSidebarDrawerContent = ({
  repositoryType,
  onCancel,
  isLoading,
  isSubmitting,
  data,
  pullRequest,
  onSave,
  setPullRequest
}) => {
  const { t } = useTranslation();
  const [formErrors, setFormErrors] = useState();
  if (isLoading) {
    return /* @__PURE__ */ jsxs(Stack, { spacing: 5, sx: { p: 2.5 }, children: [
      /* @__PURE__ */ jsxs(Typography, { component: "span", style: { display: "flex", height: "10%" }, children: [
        /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "100%", height: "100%" }),
        /* @__PURE__ */ jsx(
          IconButton,
          {
            title: t("previewFile.closeDrawer"),
            onClick: onCancel,
            color: "inherit",
            size: "large",
            children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
          },
          "dismiss"
        )
      ] }),
      /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "100%", height: 750 }),
      /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "100%", height: "10%" })
    ] });
  }
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(Box, { children: [
      /* @__PURE__ */ jsxs(
        Box,
        {
          sx: {
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-between",
            alignItems: "baseline",
            p: 2.5
            // padding: theme.spacing(2.5)
          },
          children: [
            /* @__PURE__ */ jsx("div", { children: repositoryType === RepositorySelection.Repository ? /* @__PURE__ */ jsxs(Fragment, { children: [
              /* @__PURE__ */ jsx(Typography, { variant: "h5", children: `${data.orgName ?? data.organizationUrl}/${data.repoName}` }),
              /* @__PURE__ */ jsxs(Link, { to: data.repoUrl ?? "", children: [
                urlHelper(data.repoUrl || ""),
                /* @__PURE__ */ jsx(
                  OpenInNewIcon,
                  {
                    style: { verticalAlign: "sub", paddingTop: "7px" }
                  }
                )
              ] })
            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
              /* @__PURE__ */ jsx(Typography, { variant: "h5", children: `${data.orgName}` }),
              /* @__PURE__ */ jsxs(Link, { to: data.organizationUrl ?? "", children: [
                urlHelper(data.organizationUrl || ""),
                /* @__PURE__ */ jsx(
                  OpenInNewIcon,
                  {
                    style: { verticalAlign: "sub", paddingTop: "7px" }
                  }
                )
              ] })
            ] }) }),
            /* @__PURE__ */ jsx(
              IconButton,
              {
                title: t("previewFile.closeDrawer"),
                onClick: onCancel,
                color: "inherit",
                size: "large",
                children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
              },
              "dismiss"
            )
          ]
        }
      ),
      /* @__PURE__ */ jsxs(
        Box,
        {
          sx: {
            p: 2.5,
            // padding: theme.spacing(2.5)
            pt: 1,
            // paddingTop: theme.spacing(1)
            pb: 1,
            // paddingBottom: theme.spacing(1)
            mb: "100px",
            // marginBottom: '100px'
            flexGrow: 1
            // flex-grow: 1
          },
          children: [
            repositoryType === RepositorySelection.Repository && /* @__PURE__ */ jsx(
              PreviewPullRequest,
              {
                repoId: data.id,
                repoUrl: data.repoUrl || "",
                repoBranch: data.defaultBranch || "main",
                pullRequest,
                setPullRequest,
                formErrors,
                setFormErrors
              }
            ),
            repositoryType === RepositorySelection.Organization && /* @__PURE__ */ jsx(
              PreviewPullRequests,
              {
                repositories: Object.values(data?.selectedRepositories || []) || [],
                pullRequest,
                formErrors,
                setFormErrors,
                setPullRequest
              }
            )
          ]
        }
      )
    ] }),
    /* @__PURE__ */ jsxs(
      Box,
      {
        sx: {
          display: "flex",
          flexDirection: "row",
          gap: "14px",
          pt: 2.5,
          // paddingTop: theme.spacing(2.5)
          justifyContent: "left",
          position: "fixed",
          bottom: 0,
          pl: "24px",
          // paddingLeft: '24px'
          pb: "24px",
          // paddingBottom: '24px'
          backgroundColor: (theme) => theme.palette.mode === "light" ? "#fff" : "#1b1d21",
          width: "100%",
          borderTopStyle: "groove",
          borderColor: "divider",
          // using theme.palette.divider for border
          zIndex: 1
        },
        children: [
          /* @__PURE__ */ jsx(
            Button,
            {
              variant: "contained",
              color: "primary",
              onClick: (e) => onSave(pullRequest, e),
              sx: { mr: 1 },
              disabled: isSubmitting || !!formErrors && Object.values(formErrors).length > 0 && Object.values(formErrors).some(
                (fe) => !!fe && Object.values(fe).length > 0
              ),
              startIcon: isSubmitting && /* @__PURE__ */ jsx(CircularProgress, { size: "20px", color: "inherit" }),
              children: t("common.save")
            }
          ),
          /* @__PURE__ */ jsx(Link, { to: "", variant: "button", onClick: onCancel, children: /* @__PURE__ */ jsx(Button, { variant: "outlined", children: t("common.cancel") }) })
        ]
      }
    )
  ] });
};

export { PreviewFileSidebarDrawerContent };
//# sourceMappingURL=PreviewFileSidebarDrawerContent.esm.js.map