interface Controller {
  /**
   *
   * @return 結果
   */
  start: (projects: string[], links: string[]) => Promise<
    "success" | "cancel" | "failed"
  >;
  close: () => void;
}

const App = ({ getController }: AppProps) => {
  const [after, setAfter] = useState("");
  const [before, setBefore] = useState("");
  const [projects, setProjects] = useState<string[]>([]);
  const [onEnd, setOnEnd] = useState<(result: Result) => void>(() => {});
  
  const linksDiff = useMemo(() => {
    const lines = after.split("\n");
    // 空文字の場合は、変更なしとみなす
    return links.map((link, i) => ({ before: link, after: lines[i]?.trim?.() || link }));
  }, [links, after]);
  const replace = useCallback(async () => {
    setReplacing(true);
    await replaceLinks(linksDiff, projects);
    setReplacing(false);
    setOpen(false);
    onEnd("success");
  }, [linksDiff, projects, onEnd]);
  const handleInput = useCallback((e) => setAfter(e.currentTarget.value), []); 
  
  const startReplace = useCallback((projects: string[], links: string[]) => {
    setProject(projects);
    setBefore(links.join("\n"));
    setOpen(true);
    return new Promise<Result>((resolve) => setOnEnd(resolve));
  }, []);
  useEffect(() => getController({
    start: startReplace,
    close: () => setOpen(false),
  }), [getController]);
  
  return (
    <>
      <style>
        {''}
      </style>
      <div id="background" className={`modal${closed ? " closed" : ""}`} role="dialog" onClick={handleClose}>
        <div className="container">
          <div className="preview">
            Replace {linksDiff.length} links
            <ul>
              {linksDiff.map((link) => (
                <li className={
                  link.before !== link.after ? "emphasis" : ""
                }>{
                  link.after
                }</li>
              ))}
            </ul>
          </div>
          <textarea value={after} onInput={handleInput} />
          <div className="footer">
            <button className={replacing ? "inactive" : "active"} onClick={close}>Cancel</button>
            <button className={replacing ? "inactive" : "active"} onClick={replace}>Replace</button>
          </div>
        </div>
      </div>
    </>
  );
};