import "./assets/styles.css";
import {useEffect} from "react";

function isObject (x) {
  return typeof x === 'object' && !Array.isArray(x) && x !== null;
}
function Title(props) {
  const klass = ["text-3xl", "font-bold", "underline"];
  let {prefix} = props;
  if (prefix) {
    return (
      <h1 className={klass}>SQS Queues matching prefix {prefix}</h1>
    )
  } else {
    return (
      <h1 className={klass}>SQS Queues</h1>
    )
  }
}

function HomeCell(props) {
  let {content} = props;
  var cell;

  if (!isObject(content)) {
    cell = <p className="lead">{content}</p>;
  } else if (content.URL) {
    cell = <a href={content.URL}>{content.Text}</a>;
  } else {
    let cell = "nix";
  }
  return <td>{cell}</td>;
// {
//   {/* Bound queues: 3 named lists */
//   }
// }
// {
//   {
//     if eq(len.Links) 3
//   }
// }
// {
//   {
//     if index.Links 0
//   }
// }
// <p className="lead">Bound queues</p>
// {
//   {
//     end
//   }
// }
// <ul>
//   {{range index.Links 0}}
//   <li><a href="{{ .URL }}">{{.Text}}</a></li>
//   {{end}}
// </ul>
// {
//   {
//     if index.Links 1
//   }
// }
// <p className="lead">Allowed source queues using another DLQ</p>
// {
//   {
//     end
//   }
// }
// <ul>
//   {{range index.Links 1}}
//   <li><a href="{{ .URL }}">{{.Text}}</a></li>
//   {{end}}
// </ul>
// {
//   {
//     if index.Links 2
//   }
// }
// <p className="lead">Allowed source queues not declaring a DLQ or with another prefix</p>
// {
//   {
//     end
//   }
// }
// <ul>
//   {{range index.Links 2}}
//   <li><a href="{{ .URL }}">{{.Text}}</a></li>
//   {{end}}
// </ul>
// {
//   {else
//   }
// }
// {
//   {
//     range.Links
//   }
// }
// <ul>
//   {{range .}}
//   <li><a href="{{ .URL }}">{{.Text}}</a></li>
//   {{end}}
// </ul>
// {
//   {
//     end
//   }
// }
// {
//   {
//     end
//   }
// }
// {
//   {
//     end
//   }
// }
}

function HomeRow(props) {
  let {left, right} = props;
  return (
    <tr>
      <HomeCell content={left}/>
      <HomeCell content={right} />
    </tr>

  )
}

function Rows(props) {
  return <>
    <HomeRow left="DLQ allows all sources" right={{URL: "https://example.com", Text: "wild-dlq"}} />
    <HomeRow left="DLQ does not allow any source" right={{URL: "https://example.com", Text: "closed-dlq"}} />
    <HomeRow left={{URL: "https://example.com", Text: "closed-dlq"}} right="Source queues have no DLQ configured" />
  </>
}

function Home(props) {
  let {prefix, rows} = props;
  useEffect(() => {
    document.title = "SQS Redriver";
  });

  return (
    <main className="container">
      <div className="container mt-5">
        <nav aria-label="breadcrumb">
          <ol className="breadcrumb">
            <li className="breadcrumb-item">Home</li>
          </ol>
        </nav>
      </div>

      <Title prefix={prefix}/>
      <table id="home-table" className="table">
        <caption>Having DLQs not allowing any source queue is a configuration anomaly.
          So is having a DLQ allowing a source queue and that source using another DLQ instead.
        </caption>
        <thead>
        <tr>
          <th scope="col">Queue name</th>
          <th scope="col">DLQ name</th>
        </tr>
        </thead>
        <tbody>
        <Rows rows={rows}/>
        </tbody>
      </table>
      )
    </main>
  )
}

export default Home;
