/**
 * Copyright (c) 2023-present Pi Dash Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { observer } from "mobx-react";
// pi dash imports
import { Loader } from "@pi-dash/ui";
// types
import type { IIssue } from "@/types/issue";
// local imports
import { PeekOverviewHeader } from "./header";
import { PeekOverviewIssueActivity } from "./issue-activity";
import { PeekOverviewIssueDetails } from "./issue-details";
import { PeekOverviewIssueProperties } from "./issue-properties";

type Props = {
  anchor: string;
  handleClose: () => void;
  issueDetails: IIssue | undefined;
};

export const FullScreenPeekView = observer(function FullScreenPeekView(props: Props) {
  const { anchor, handleClose, issueDetails } = props;

  return (
    <div className="grid h-full w-full grid-cols-10 divide-x divide-subtle-1 overflow-hidden">
      <div className="col-span-7 flex h-full w-full flex-col overflow-hidden">
        <div className="w-full p-5">
          <PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
        </div>
        {issueDetails ? (
          <div className="h-full w-full overflow-y-auto px-6">
            {/* issue title and description */}
            <div className="w-full">
              <PeekOverviewIssueDetails anchor={anchor} issueDetails={issueDetails} />
            </div>
            {/* divider */}
            <div className="my-5 h-[1] w-full border-t border-subtle" />
            {/* issue activity/comments */}
            <div className="w-full pb-5">
              <PeekOverviewIssueActivity anchor={anchor} issueDetails={issueDetails} />
            </div>
          </div>
        ) : (
          <Loader className="px-6">
            <Loader.Item height="30px" />
            <div className="mt-3 space-y-2">
              <Loader.Item height="20px" width="70%" />
              <Loader.Item height="20px" width="60%" />
              <Loader.Item height="20px" width="60%" />
            </div>
          </Loader>
        )}
      </div>
      <div className="col-span-3 h-full w-full overflow-y-auto">
        {/* issue properties */}
        <div className="w-full px-6 py-5">
          {issueDetails ? (
            <PeekOverviewIssueProperties issueDetails={issueDetails} />
          ) : (
            <Loader className="mt-11 space-y-4">
              <Loader.Item height="30px" />
              <Loader.Item height="30px" />
              <Loader.Item height="30px" />
              <Loader.Item height="30px" />
            </Loader>
          )}
        </div>
      </div>
    </div>
  );
});
