import { useState } from "react";
import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";
import { Form, useActionData, useLoaderData } from "react-router";
import { login } from "../../shopify.server";
import { loginErrorMessage } from "./error.server";

export const loader = async ({ request }: LoaderFunctionArgs) => ({
  errors: loginErrorMessage(await login(request)),
});

export const action = async ({ request }: ActionFunctionArgs) => ({
  errors: loginErrorMessage(await login(request)),
});

export default function Auth() {
  const loaderData = useLoaderData<typeof loader>();
  const actionData = useActionData<typeof action>();
  const [shop, setShop] = useState("");
  const { errors } = actionData || loaderData;

  return (
    <>
      <script src="https://cdn.shopify.com/shopifycloud/polaris.js" />
      <s-page heading="SweetBengal Delivery Charge">
      <Form method="post">
        <s-section heading="Connect store">
          <s-text-field
            name="shop"
            label="Shop domain"
            details="example.myshopify.com"
            value={shop}
            onChange={(e) => setShop(e.currentTarget.value)}
            autocomplete="on"
            error={errors?.shop}
          ></s-text-field>
          <s-button type="submit" variant="primary">Continue</s-button>
        </s-section>
      </Form>
    </s-page>
    </>
  );
}