---
import type { FetchResult } from "@/types/types"
import Disclosure from "./output/Disclosure.astro"
import DisclosureContainer from "./output/DisclosureContainer.astro"
import { diffChars } from "diff"

interface Props {
  fetchResult: FetchResult | null
}
const { fetchResult } = Astro.props
---

<DisclosureContainer>
  <Disclosure title={"Show me how it's done"}>
    <table class={"table"}>
      <tbody>
      {
        fetchResult?.orderOperations?.map((operation, index) => (
          <tr class={"border-b border-dotted border-gray-500"}>
            <td>{index + 1}:</td>
            <td class={"px-2"}>
              {
                diffChars(operation.before, operation.after).map((part) => (
                  <span class={`${part.added && "bg-green-700"} ${part.removed && "bg-red-700"}`}>
                    {part.value}
                  </span>
                ))
              }
            </td>
            <td>using: {operation.law}</td>
          </tr>
        ))
        }
      </tbody>
    </table>
  </Disclosure>
</DisclosureContainer>