import { html } from "lit";
import { customElement } from "lit/decorators.js";
import { SketchTailwindElement } from "./sketch-tailwind-element.js";

/**
 * A component that displays helpful information when the diff view is empty
 */
@customElement("sketch-diff-empty-view")
export class SketchDiffEmptyView extends SketchTailwindElement {
  render() {
    return html`
      <div
        class="flex flex-col items-center justify-center h-full w-full box-border"
      >
        <div
          class="m-8 mx-auto max-w-4xl w-11/12 p-8 border-2 border-gray-300 rounded-lg shadow-sm bg-white text-center"
        >
          <h2 class="text-2xl font-semibold mb-6 text-center text-gray-800">
            How to use the Diff View
          </h2>

          <p class="text-gray-600 leading-relaxed text-base text-left mb-4">
            By default, the diff view shows differences between when you started
            Sketch (the "sketch-base" tag) and the current state. Choose a
            commit to look at, or, a range of commits, and navigate across
            files.
          </p>

          <p class="text-gray-600 leading-relaxed text-base text-left mb-4">
            You can select text to leave comments on the code. These will be
            added to your chat window, and you can click Send to send them along
            to the agent, which will respond in the chat window.
          </p>

          <p class="text-gray-600 leading-relaxed text-base text-left mb-4">
            If the range includes
            <strong class="font-semibold text-gray-800"
              >Uncommitted Changes</strong
            >, you can
            <strong class="font-semibold text-gray-800">edit</strong> the text
            as well, and it auto-saves. If you want to clear up a comment or
            write your own text, just go ahead and do it! Once you're done,
            though, be sure to commit your changes, either by asking the agent
            to do so or in the Terminal view.
          </p>
        </div>
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "sketch-diff-empty-view": SketchDiffEmptyView;
  }
}