// import "./ExploreContainer.css";

import { useEffect, useState } from "react";
import { useMyContext } from "../context/MyContext";

const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
  let { my_context, setMyContext } = useMyContext();

  let [test_first, setTestFirst] = useState<IFirst | undefined>(undefined);
  let [test_second, setTestSecond] = useState<ISecond | undefined>(undefined);
  let [test_third, setTestThird] = useState<IThird | undefined>(undefined);

  // let test: IFirst = { test_s: "test", test_i: 1 };
  // let test_second_o: ISecond = {
  //   test_s: "test",
  //   test_i: 1,
  //   content: [test, test, test],
  // };
  // let test_third_o: IThird = {
  //   test_s: "test",
  //   test_i: 1,
  //   content: [test_second_o, test_second_o, test_second_o],
  // };

  useEffect(() => {
    setTestFirst({ test_s: "test", test_i: 1 });

    if (test_first) {
      setTestSecond({
        test_s: "test",
        test_i: 1,
        content: [test_first, test_first, test_first],
      });
    }

    if (test_second) {
      setTestThird({
        test_s: "test",
        test_i: 1,
        content: [test_second, test_second, test_second],
      });
    }
  }, [test_first, test_second]);

  return (
    <div>
      {JSON.stringify(my_context)}
      <pre className="container">{JSON.stringify(test_third, null, 2)}</pre>
    </div>
  );
};

export default ExploreContainer;

interface ContainerProps {
  name: string;
}

interface IFirst {
  test_s: string;
  test_i: number;
}

interface ISecond {
  test_s: string;
  test_i: number;
  content: IFirst[] | [];
}

interface IThird {
  test_s: string;
  test_i: number;
  content: ISecond[] | [];
}
