import Link from "next/link";
import { useState } from "react";
import { encode } from "html-entities";
import Container from "../../components/Container";
import Section from "../../components/Section";
import SingleColumn from "../../components/SingleColumn";
import { useInputChange } from "../../lib/hooks";

const SubmissionPage = () => {
  const [form, handleFormChange] = useInputChange();
  const [publicGroup, setPublicGroup] = useState(true);

  const href = `https://github.com/urbit/urbit.org/new/master?filename=/content/groups/${
    form?.shortcode
  }.md&value=${encodeURIComponent(
    `+++
title = "${form?.groupName}"
shortcode = "${form?.shortcode}"
type = "${publicGroup ? "Public" : "Private"}"
image = "${form?.imageUrl || ""}"
participant_range = "${form?.members || ""}"
+++

${form?.description || ""}`
  )}`;

  return (
    <Container>
      <SingleColumn>
        <Section narrow className="space-y-12">
          <div className="flex flex-col space-y-4">
            <h2>Submit your group</h2>
            <p>
              Groups submissions are accomplished through a GitHub pull request.
            </p>
            <p>
              You’ll need <a href="https://github.com">a GitHub account</a>{" "}
              before you get started to submit your group.
            </p>
            <p>
              First, enter your information and then click “Submit with GitHub.”
              You’ll be directed to a GitHub pull request page with a
              pre-populated markdown file. Click “Propose new file,” and then
              “Create pull request” on the following page.
            </p>
            <p>
              Then, to validate that you operate this group, send a DM to{" "}
              <Link href="/ids/~haddef-sigwen">
                <a>~haddef-sigwen</a>
              </Link>{" "}
              from your group host <code>@p</code> with a link to the pull
              request on GitHub. We’ll approve the pull request and your page
              will be online shortly.
            </p>
          </div>
          <div className="flex flex-col space-y-4">
            <h3>Enter your group information</h3>
            <div className="flex flex-col">
              <p>Group name (required)</p>
              <input
                className="bg-wall-100 p-2"
                name="groupName"
                onChange={handleFormChange}
              />
            </div>
            <div className="flex flex-col">
              <p>Group type</p>
              <div className="flex space-x-4">
                <div
                  className="flex items-center space-x-2 cursor-pointer"
                  onClick={() => setPublicGroup(true)}
                >
                  <input
                    type="radio"
                    onChange={() => null}
                    checked={publicGroup}
                  />
                  <p>Public</p>
                </div>
                <div
                  className="flex items-center space-x-2 cursor-pointer"
                  onClick={() => setPublicGroup(false)}
                >
                  <input
                    type="radio"
                    onChange={() => null}
                    checked={!publicGroup}
                  />
                  <p>Private</p>
                </div>
              </div>
            </div>
            <div className="flex flex-col">
              <p>
                Shortcode (e.g. <code>~bitbet-bolbel/urbit-community</code>)
                (required)
              </p>
              <input
                className="bg-wall-100 p-2"
                name="shortcode"
                onChange={handleFormChange}
              />
            </div>
            <div className="flex flex-col">
              <p>
                Group image URL (e.g. <code>https://...</code>) or color (e.g.{" "}
                <code>#FFCED0</code>)
              </p>
              <input
                className="bg-wall-100 p-2"
                name="imageUrl"
                onChange={handleFormChange}
              />
            </div>
            <div className="flex flex-col">
              <p>
                Members (e.g. <code>1000+</code>)
              </p>
              <input
                className="bg-wall-100 p-2"
                name="members"
                onChange={handleFormChange}
              />
            </div>
            <div className="flex flex-col">
              <p>Description</p>
              <textarea
                className="resize-none bg-wall-100 p-2 h-60"
                name="description"
                onChange={handleFormChange}
              />
            </div>
          </div>
          <button
            className="button-lg bg-wall-600 text-wall-100"
            onClick={() => window.open(href)}
          >
            Submit with GitHub
          </button>
          <Link href="/">
            <a className="text-xl pt-8 block font-semibold">Urbit.org</a>
          </Link>
        </Section>
      </SingleColumn>
    </Container>
  );
};

export default SubmissionPage;

@@ -61,48 +61,8 @@
 t%22;%0A
-import %7B encode %7D from %22html-entities%22;%0A
 impo
@@ -264,16 +264,88 @@
 /hooks%22;
+%0Aimport Head from %22next/head%22;%0Aimport Meta from %22../../components/Meta%22;
 %0A%0Aconst 
@@ -889,16 +889,108 @@
 tainer%3E%0A
+      %3CHead%3E%0A        %3Ctitle%3ESubmit a group %E2%80%A2 Urbit.org%3C/title%3E%0A        %7BMeta%7D%0A      %3C/Head%3E%0A
       %3CS
@@ -2469,16 +2469,62 @@
 upName%22%0A
+                placeholder=%22Urbit Community%22%0A
         
@@ -3596,127 +3596,28 @@
  %3Cp%3E
-%0A                Shortcode (e.g. %3Ccode%3E~bitbet-bolbel/urbit-community%3C/code%3E)%0A                (required)%0A              
+Shortcode (required)
 %3C/p%3E
@@ -3715,16 +3715,77 @@
 rtcode%22%0A
+                placeholder=%22~bitbet-bolbel/urbit-community%22%0A
         
@@ -3921,145 +3921,32 @@
  %3Cp%3E
-%0A                Group image URL (e.g. %3Ccode%3Ehttps://...%3C/code%3E) or color (e.g.%7B%22 %22%7D%0A                %3Ccode%3E#FFCED0%3C/code%3E)%0A              
+Group image URL or color
 %3C/p%3E
@@ -4043,16 +4043,69 @@
 ageUrl%22%0A
+                placeholder=%22https://... or #FFCDE0%22%0A
         
@@ -4241,73 +4241,15 @@
  %3Cp%3E
-%0A                Members (e.g. %3Ccode%3E1000+%3C/code%3E)%0A              
+Members
 %3C/p%3E
@@ -4345,16 +4345,52 @@
 embers%22%0A
+                placeholder=%221000+%22%0A
         

add title to submit page