import React, {useEffect, useState} from "react";
import {MaterialReactTable, useMaterialReactTable} from "material-react-table";

const columnsA = [
    {accessorKey: "name", header: "Name"}, //shared column
    {accessorKey: "age", header: "Age"}, //shared column
    {accessorKey: "gender", header: "Gender"},
    {accessorKey: "city", header: "City"},
    {accessorKey: "country", header: "Country"},
    {accessorKey: "email", header: "Email"},
    {accessorKey: "phone", header: "Phone"},
    {accessorKey: "occupation", header: "Occupation"},
    {accessorKey: "company", header: "Company"},
    {accessorKey: "department", header: "Department"}
];
const columnsB = [
    {accessorKey: "planet", header: "Planet"}, //try commenting out this column planet to test the scenario where columnA and columnB's lengths are different
    {accessorKey: "species", header: "Species"},
    {accessorKey: "powerLevel", header: "Power Level"},
    {accessorKey: "favoriteFood", header: "Favorite Food"},
    {accessorKey: "nemesis", header: "Nemesis"},
    {accessorKey: "originStory", header: "Origin Story"},
    {accessorKey: "sidekick", header: "Sidekick"},
    {accessorKey: "catchPhrase", header: "Catch Phrase"},
    {accessorKey: "age", header: "Age"}, //shared column
    {accessorKey: "name", header: "Name"} //shared column
];

const dataA = [
    {
        name: "Alice",
        age: 30,
        gender: "Female",
        city: "New York",
        country: "USA",
        email: "[email protected]",
        phone: "123-456-7890",
        occupation: "Engineer",
        company: "TechCorp",
        department: "R&D"
    },
    {
        name: "Bob",
        age: 25,
        gender: "Male",
        city: "Chicago",
        country: "USA",
        email: "[email protected]",
        phone: "234-567-8901",
        occupation: "Designer",
        company: "DesignInc",
        department: "Creative"
    },
    {
        name: "Carol",
        age: 28,
        gender: "Female",
        city: "San Francisco",
        country: "USA",
        email: "[email protected]",
        phone: "345-678-9012",
        occupation: "Manager",
        company: "BizGroup",
        department: "Operations"
    },
    {
        name: "Dave",
        age: 35,
        gender: "Male",
        city: "Boston",
        country: "USA",
        email: "[email protected]",
        phone: "456-789-0123",
        occupation: "Developer",
        company: "DevWorks",
        department: "Engineering"
    },
    {
        name: "Eve",
        age: 22,
        gender: "Female",
        city: "Seattle",
        country: "USA",
        email: "[email protected]",
        phone: "567-890-1234",
        occupation: "Analyst",
        company: "DataCorp",
        department: "Analytics"
    }
];
const dataB = [
    {
        planet: "Earth",
        species: "Human",
        powerLevel: 9001,
        favoriteFood: "Pizza",
        nemesis: "Dr. Evil",
        originStory: "Bitten by a radioactive spider",
        sidekick: "Robin",
        catchPhrase: "To infinity and beyond!",
        age: 22,
        name: "Eve"
    },
    {
        planet: "Mars",
        species: "Martian",
        powerLevel: 12000,
        favoriteFood: "Martian Mushrooms",
        nemesis: "Space Pirates",
        originStory: "Born in a volcano",
        sidekick: "Blip",
        catchPhrase: "Take me to your leader!",
        age: 35,
        name: "Dave"
    },
    {
        planet: "Krypton",
        species: "Kryptonian",
        powerLevel: 15000,
        favoriteFood: "Crystal Soup",
        nemesis: "Lex Luthor",
        originStory: "Sent to Earth as a baby",
        sidekick: "Superdog",
        catchPhrase: "Up, up, and away!",
        age: 28,
        name: "Carol"
    },
    {
        planet: "Venus",
        species: "Venusian",
        powerLevel: 8000,
        favoriteFood: "Venusian Veggies",
        nemesis: "Galactic Queen",
        originStory: "Raised by robots",
        sidekick: "Vee",
        catchPhrase: "Love conquers all!",
        age: 25,
        name: "Bob"
    },
    {
        planet: "Jupiter",
        species: "Jovian",
        powerLevel: 11000,
        favoriteFood: "Storm Fruit",
        nemesis: "Thunder King",
        originStory: "Born in the Great Red Spot",
        sidekick: "Juno",
        catchPhrase: "Ride the lightning!",
        age: 30,
        name: "Alice"
    }
];

export const ExampleTable = () => {
    const [useA, setUseA] = useState(true);

    const columns = useA ? columnsA : columnsB;
    const data = useA ? dataA : dataB;

    const table = useMaterialReactTable({
        columns,
        data,
    });

    useEffect(() => {
        console.log(table.getState())
    }, [table, useA])

    return (
        <div>
            <button onClick={() => setUseA(a => !a)}>
                Switch Columns/Data
            </button>
            <MaterialReactTable table={table}/>
        </div>
    );
};