#!/usr/bin/env node

import React from "react";
import { render, Box, Text } from "ink";

console.log("This app is still WIP!\n\n");

// testing dummies
import hexrcs from "./profiles/hexrcs.json";
import template from "./profiles/template.json";

function main() {
  const args = process.argv.slice(2);
  let root;
  if (args.find(x => x === "-h" || x === "--help")) {
    if (args.length === 1) {
      root = <Help />;
    } else {
      root = <Invalid />;
    }
  } else if (args.length === 0) {
    root = <Help />;
  } else {
    root = <App profile={hexrcs} />;
  }

  render(root);
}

type AppProps = {
  profile: {
    name: string;
    about: string;
    links?: {
      label: string;
      url: string;
    }[];
  };
};

const Help = () => <Text>Help page</Text>;
const Invalid = () => <Text>Invalid arguments!</Text>;
const App = ({ profile }: AppProps) => {
  // TODO: the list should be generated
  // also should we use real names (can be long and space separated) or use handles?
  // shouldn't be a problem when later we have a server and whatnot

  return (
    <Box flexDirection={"column"}>
      <Text bold>{profile.name}</Text>
      <Text> </Text>
      <Text>{profile.about}</Text>
      <Text> </Text>
      {profile.links?.map((x, i) => (
        <Text key={i}>- {x.label}</Text>
      ))}
    </Box>
  );
};

main();