export const App: FC = memo(() => {
  const [note, setNote] = useState("");
  return (
    <main className="container">
      <form
        onSubmit={(event) => {
          event.preventDefault();
          setNote("");
        }}
      >
        <input
          className="add-note"
          type="text"
          value={note}
          onChange={({ target: { value } }) => setNote(value)}
        />
      </form>
      <ul className="notes">
        {appState.notes.map((note, index) => (
          <li className="note" key={note.id}>
            <span>
              <span style={{ fontWeight: "bold" }}>{index + 1}. </span>
              <span
                style={{
                  textDecorationLine: note.completed ? "line-through" : "none",
                }}
              >
                {note.title}
              </span>
            </span>
            <input
              className="done-note"
              type="checkbox"
              checked={note.completed}
            />
          </li>
        ))}
      </ul>
    </main>
  );
});

const reducer = (state, action) => {
  switch (action.type) {
    case "add_note":
      return {
        ...state,
        notes: [
          ...state.notes,
          {
            id: Math.random().toString(36).substring(7),
            title: action.note,
            completed: false,
          },
        ],
      };
    case "done_note":
      return {
        ...state,
        notes: state.notes.map((note) =>
          note.id === action.id ? { ...note, completed: !note.completed } : note
        ),
      };
    case "delete_note":
      return {
        ...state,
        notes: state.notes.filter(({ id }) => id !== action.id),
      };
    default:
      throw new Error();
  }
};

export const App: FC = memo(() => {
  const [appState, dispatch] = useReducer(reducer, { notes: [] });
  //...
  return (
    <main className="container">
      <form
        onSubmit={(event) => {
          event.preventDefault();
          dispatch({ type: "add_note", note });
          setNote("");
        }}
      >
        <input
          className="add-note"
          type="text"
          placeholder="Add Note"
          value={note}
          onChange={({ target: { value } }) => setNote(value)}
          required
          autoFocus
        />
      </form>
      <ul className="notes">
        {appState.notes.map((note, index) => (
          <li className="note" key={note.id}>
            <span>
              <span style={{ fontWeight: "bold" }}>{index + 1}. </span>
              <span
                style={{
                  textDecorationLine: note.completed ? "line-through" : "none",
                }}
              >
                {note.title}
              </span>
            </span>
            <input
              className="done-note"
              type="checkbox"
              checked={note.completed}
              onChange={() => dispatch({ type: "done_note", id: note.id })}
            />
          </li>
        ))}
      </ul>
    </main>
  );
});

const initializeAssistant = () => {
  if (process.env.NODE_ENV === "development") {
    return createSmartappDebugger({
      token: process.env.REACT_APP_TOKEN ?? "",
      initPhrase: `Запусти ${process.env.REACT_APP_SMARTAPP}`,
    });
  }
  return createAssistant();
};

interface AssistantSmartAppCommand {
  // Тип команды
  type: "smart_app_data";
  // Любые данные, которые нужны смартапу
  smart_app_data: Record<string, any>;
  sdkMeta: {
    requestId: string;
  };
}

export const App: FC = memo(() => {
  const [appState, dispatch] = useReducer(reducer, { notes: [] });
  const [note, setNote] = useState("");
  const assistantRef = useRef();
  useEffect(() => {
    assistantRef.current = initializeAssistant();
    assistantRef.current.on("data", ({ action }) => {
      if (action) {
        dispatch(action);
      }
    });
  }, []);
  // ...

const initializeAssistant = (getState) => {
  if (process.env.NODE_ENV === "development") {
    return createSmartappDebugger({
      token: process.env.REACT_APP_TOKEN ?? "",
      initPhrase: `Запусти ${process.env.REACT_APP_SMARTAPP}`,
      getState,
    });
  }
  return createAssistant({ getState });
};

export const App: FC = memo(() => {
  // ...
  const assistantStateRef = useRef<AssistantAppState>();
  // ...
  useEffect(() => {
    assistantRef.current = initializeAssistant(() => assistantStateRef.current);
    // ...
  }, []);
  useEffect(() => {
    assistantStateRef.current = {
      item_selector: {
        items: appState.notes.map(({ id, title }, index) => ({
          number: index + 1,
          id,
          title,
        })),
      },
    };
  }, [appState]);
  // ...

assistant.on('data', (command) => {
    if (command.navigation) {
        switch(command.navigation.command) {
            case 'UP':
                window.scrollTo(0, 0);
                break;
            case 'DOWN':
                window.scrollTo(0, 1000);
                break;
        }
    }
});