import { useEffect, useState } from 'react';
import ApplicationDetails from './ApplicationDetails'

const ApplicationSettings = () => {
  const [state, setState] = useState([]);

  const getData = async () => {
    const response = await fetch("/sui/api/apps");
    const data = await response.json();
    setState(data);
  };

  const addRow = () => {
    setState([
      ...state,
      { key: state.length +1,name: "", url: "home.halfaperture.com/", icon: "", urlbase: "/", NSFW: false}
    ]);
  };

  useEffect(() => {
    getData();
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    let names = []
    let urls = []
    let icons = []
    let urlbases = []
    let NSFWs = []
    let exportData = {
      apps: []
    }
    for (const item of e.target.form) {
      if (item.type === "text") {
        switch (item.id) {
          case "name":
            names.push(item.value)
            break;
          case "url":
            urls.push(item.value)
            break;
          case "icon":
            icons.push(item.value)
            break;
          case "urlbase":
            urlbases.push(item.value)
            break;
          default:
            break;
        }
      } else if (item.type === "checkbox") {
        if (item.checked) {
          NSFWs.push("NSFW")
        } else {
          NSFWs.push("SAFE")
        }
      }
    }
    for (let index = 0; index < names.length; ++index) {
      exportData.apps.push({
        "name"     : names[index],
        "url"     : urls[index],
        "icon"    : icons[index],
        "urlbase"  : urlbases[index],
        "NSFW"    : NSFWs[index]
      });
    }
    let exportJSON = JSON.stringify(exportData)
    const requestOptions = {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: exportJSON
    };
    fetch("/sui/api/appUpdate", requestOptions)
      .then(getData())
  };

  return (
    <div id="settings-panel">
      <div id="settings-panel-header">
          <h1>Applications</h1>
      </div>
      <form id="applicationForm">
      <div id="applicationHeader">
        <div>Name</div>
        <div>URL</div>
        <div>Icon</div>
        <div>Base URL</div>
        <div>Hideable</div>
      </div>
        {state.map((apps) => (
          <ApplicationDetails
            key={apps.name}
            name={apps.name}
            url={apps.url}
            icon={apps.icon}
            urlbase={apps.urlbase}
            NSFW={apps.NSFW}
          />
        ))}
        
      </form>
      <button onClick={addRow} className="addRow">Add Application</button>
      <button onClick={handleSubmit} type="submit" form="applicationForm" value="submit">Save</button>
    </div>
    
  );
}

export default ApplicationSettings;