const {DOM, Tag, H, App} = Gale({
  Form:{
    padding: "20px"
  },
  Input:{
    display:"inlnine-block",
    padding:"0.5rem 1rem",
    borderRadius:"0.5rem",
    outline:"1px solid #ddd",
    ":focus":{
      outline: "2px solid green"
    }
  },
  Button:{
    display:"inline-block",
    padding:"1rem",
    background:"green",
    color:"white",
    borderRadius:"0.5rem",
    cursor:"pointer",
    textTransform:"uppercase",
    fontWeight:"bolder",
    ":hover":{background:"black"}
  },
  Complete:{
    fontSize:"0.6rem",
    padding:"0.5rem",
    background:"limegreen"
  },
  Incomplete:{
    fontSize:"0.6rem",
    padding:"0.5rem",
    background:"yellow",
    color:"black",
    ":hover":{
      color:"white"
    }
  },
  Delete:{
    fontSize:"0.6rem",
    padding:"0.5rem",
    background:"tomato"
  },

  Title:{
    fontSize: "2rem"
  },
  List:{
    padding:"1rem",
    background:"#ddd"
  },
  Item:{
    display:"flex",
    gap:"1rem",
    alignItems:"center"
  },
  Done:{
    textDecoration:"line-through"
  }
});

/** @typedef {{name:string, done:boolean}} Todo */

/** @type {{pending:string, list:Todo[]}} */
const InitialState = {pending:"todo name", list:[]};
const Store = vanX.Store(InitialState, "todos_v1");

const PendingCreate=()=>{
  const newTodo = /** @type {Todo} */({name:Store.pending, done:false});
  Store.list.unshift(newTodo);
  Store.pending = "";
  console.log(Store);
}
const PendingChange =(/** @type {InputEvent}*/e)=>{
  console.log(e);
  Store.pending = /** @type {HTMLInputElement}*/(e.target).value;
}


function Form()
{
  const input = DOM.input.Input({value:Store.pending, oninput:PendingChange})
  return DOM.form.Form(
    {onsubmit(e){e.preventDefault(); PendingCreate();}},
    ()=>
    {
        input.value = Store.pending;
        input.setAttribute("data-value", Store.pending);
        return input;
    },
    ()=>DOM.button.Button({disabled:Store.pending == ""}, "Create")
  )
}

function List()
{
  return ()=>Store.list.length && vanX.list(DOM.ul.List, Store.list, (v, d)=>DOM.li.Item(
    v.val.done ? DOM.button.Button.Complete({onclick(){v.val.done = false}}, "Complete") : DOM.button.Button.Incomplete({onclick(){v.val.done = true}}, "Incomplete"),
    DOM.span({class: v.val.done ? Tag("Done") : ""}, v.val.name),
    DOM.button.Button.Delete({onclick:d}, "Delete")
  ));
}


App("body",
  H.Form
  (
    H.Title("todos"),
    Form(),
    List(),
    ()=>H.Item(Store.pending)
  )
);