import "./style.css";

import axios from "axios";
import { useEffect, useState } from "react";

import Container from "../../layouts/Container";
import jutsus from "../../data/jutsuData";

const Dev = () => {
  const [data, setData] = useState();
  const [_foundryId, setFoundryId] = useState();
  const [name, setName] = useState();
  const [img, setImg] = useState();
  const [level, setLvl] = useState();
  const [element, setElem] = useState();
  const [description, setDesc] = useState();
  const [duration, setDuration] = useState();
  const [range, setRange] = useState();
  const [uses, setUses] = useState();
  const [chakraCost, setChakraCost] = useState();
  const [actionType, setActionType] = useState();
  const [criticalThreshold, setCritical] = useState();
  const [damages, setDamages] = useState();
  const [scaleFormula, setScaleFormula] = useState();
  const [statSave, setSave] = useState();
  const [concentration, setConcentration] = useState();
  const [scaling, setScaling] = useState();

  useEffect(() => {
    setFoundryId(data?.foundry_id);
    setName(data?.name);
    setImg(data?.img);
    setLvl(data?.system ? data.system.level : data?.level);
    setElem();
    setDesc(data?.system ? data.system.description.value : data?.description);
    setDuration(data?.duration);
    setRange(data?.range);
    setUses();
    setChakraCost();
    setActionType();
    setCritical();
    setDamages();
    setScaleFormula();
    setSave();
    setConcentration();
    setScaling();
  }, [data]);

  //   uses: {
  //     amount: Number,
  //     max: Number,
  //     type: {
  //       type: mongoose.Schema.Types.ObjectId,
  //       ref: "restType",
  //     },
  //   },
  //   chakraCost: Number,
  //   actionType: {
  //     type: mongoose.Schema.Types.ObjectId,
  //     ref: "actionType",
  //   },
  //   criticalThreshold: String,
  //   damages: [String],
  //   scaleFormula: String,
  //   statSave: {
  //     targetAbility: {
  //       type: mongoose.Schema.Types.ObjectId,
  //       ref: "Ability",
  //     },
  //     sourceAbility: {
  //       type: mongoose.Schema.Types.ObjectId,
  //       ref: "Ability",
  //     },
  //   },
  //   concentration: Boolean,
  //   scaling: {
  //     available: Boolean,
  //     formula: String,
  //   },
  // })
  const handlePost = (data) => {
    // You need to modify the JSON so it appears to be the same as the MOdel in DB

    // const body = {
    //   _foundryId,
    //   name,
    //   img,
    //   level,
    //   element,
    //   description,
    // duration : {units: duration.units, value: duration.value},
    //   range,
    //   uses,
    //   chakraCost,
    //   actionType,
    //   criticalThreshold,
    //   damages,
    //   scaleFormula,
    //   statSave,
    //   concentration,
    //   scaling,
    // };

    axios
      .post("http://localhost:8080/jutsu/new", data)
      .then((response) => {
        console.log("Post successful", response.data);
      })
      .catch((error) => {
        console.error("Error posting data:", error);
      });
  };

  const handleSaveData = () => {
    localStorage.setItem("jutsuData", JSON.stringify(data));
    window.alert("data saved in locale storage");
  };

  return (
    <Container>
      <div className="devDataPicker">
        {jutsus?.map((el, id) => (
          <button
            key={id}
            onClick={() => {
              setData(el);
            }}
          >
            {el?.name}
          </button>
        ))}
      </div>

      <div className="devEdit">
        <h2>id : {data?.foundry_id}</h2>
        <h3>Item Name</h3>
        <textarea
          onChange={(e) => {
            setName(e.target.value);
          }}
          value={name}
        >
          {name}
        </textarea>
        <textarea
          onChange={(e) => {
            setDesc(e.target.value);
          }}
          value={description}
        >
          {description}
        </textarea>
        <input
          type="number"
          value={level}
          onChange={(e) => {
            setLvl(e.target.value);
          }}
        />
        <div className="devEdit__inputs">
          <input
            type="text"
            value={duration?.value}
            onChange={(e) => {
              setDuration({ ...duration, value: e.target.value });
            }}
          />
          <input
            type="text"
            value={duration?.units}
            onChange={(e) => {
              setDuration({ ...duration, units: e.target.value });
            }}
          />
        </div>
        <input
          type="number"
          value={range}
          onChange={(e) => {
            setRange(e.target.value);
          }}
        />
      </div>
      <button
        onClick={() => {
          handlePost(data);
        }}
      >
        Send to Mongo
      </button>
      <button onClick={handleSaveData}>Save</button>
    </Container>
  );
};

export default Dev;