/* index.js */

import React, { useState } from "react";
import { EmptyState, Layout, Page } from "@shopify/polaris";
import { ResourcePicker } from "@shopify/app-bridge-react";
import store from "store-js";
import ProductList from "../components/ProductList";

function Index() {
  const [modal, setModal] = useState({ open: false });
  const emptyState = !store.get("ids");

  function handleSelection(resources) {
    const ids = resources.selection.map((product) => product.id);
    setModal({ open: false });
    store.set("ids", ids);
    console.log(store.get("ids"));
  }

  return (
    <Page>
      <ResourcePicker
        resourceType="Product"
        showVariants={true}
        open={modal.open}
        onSelection={(resources) => handleSelection(resources)}
        onCancel={() => setModal({ open: false })}></ResourcePicker>
      <Layout>
        {emptyState ? (
          <EmptyState
            heading="Manage your inventory transfers"
            action={{
              content: "Add transfer",
              onAction: () => setModal({ open: true }),
            }}
            secondaryAction={{
              content: "Learn more",
              url: "https://help.shopify.com",
            }}
            image="https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg">
            <p>Select products</p>
          </EmptyState>
        ) : (
          <ProductList />
        )}
      </Layout>
    </Page>
  );
}

export default Index;


/* ProductList.js */
import gql from "graphql-tag";
import { useQuery } from "@apollo/react-hooks";
import {
  Card,
  ResourceList,
  Stack,
  TextStyle,
  Thumbnail,
} from "@shopify/polaris";
import store from "store-js";

const GET_PRODUCTS_BY_ID = gql`
  query getProducts($ids: [ID!]!) {
    nodes(ids: $ids) {
      ... on Product {
        title
        handle
        id
        images(first: 1) {
          edges {
            node {
              originalSrc
              altText
            }
          }
        }
        variants(first: 1) {
          edges {
            node {
              price
              id
            }
          }
        }
      }
    }
  }
`;

function ProductList() {
  const { loading, error, data } = useQuery(GET_PRODUCTS_BY_ID, {
    variables: { ids: store.get("ids") },
  });

  if (loading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;

  console.log("data: ", data);

  return (
    <div>
      <p>he.lo PRODUCOT LSIT</p>
    </div>
  );
}

export default ProductList;