import { Form, routeAction$, routeLoader$ } from '@qwik.dev/router';
import { component$ } from '@qwik.dev/core';
import { SESSION_COOKIE, getSessionData } from '../session-data';

export const useGetData = routeLoader$(({ cookie }) => {
  return getSessionData(cookie.get(SESSION_COOKIE)?.value);
});

export const useOtherAction = routeAction$((form, { cookie }) => {
  const data = getSessionData(cookie.get(SESSION_COOKIE)?.value);
  const name = form.name as string;
  data.push(name);
  return { success: true };
});

export default component$(() => {
  const items = useGetData();
  const action = useOtherAction();
  return (
    <div>
      <ul id="issue2644-list">
        {items.value.map((x) => (
          <li>{x}</li>
        ))}
      </ul>
      <Form action={action}>
        <input name="name" id="issue2644-input" />
        <button id="issue2644-submit">Submit</button>
      </Form>
    </div>
  );
});
