"use client";
import React from "react";
import { IInventoryItem, IStakingSource } from "typings";
import StakingSource from "./StakingSource";

interface RowProps {
  stakingSources: IStakingSource[];
  inventoryItems: IInventoryItem[] | undefined | null;
  claimStake: (stakingEventId: number) => void;
  startStake: (
    inventoryItemId: string,
    storeItemId: number,
    wellId: string
  ) => void;
}

const Row: React.FC<RowProps> = ({
  stakingSources,
  inventoryItems,
  claimStake,
  startStake,
}) => {
  return (
    <div className="md:flex md:justify-between md:items-center w-full mb-8 mt-8">
      {stakingSources.map((stakingSource, index) => (
        <div key={index} className="w-full">
          <StakingSource
            stakingSource={stakingSource}
            inventoryItems={inventoryItems}
            claimStake={claimStake}
            startStake={startStake}
          />
        </div>
      ))}
    </div>
  );
};

const moonSizes = [250, 375, 300, 225, 175, 300, 200, 150, 300, 225];

const StakingSourcesView = (props: {
  stakingSources: IStakingSource[] | null;
  inventoryItems: IInventoryItem[] | null | undefined;
  claimStake: (stakingEventId: number) => void;
  startStake: (
    inventoryItemId: string,
    storeItemId: number,
    wellId: string
  ) => void;
  createStakingSource: () => void;
}) => {
  // Generate rows of stakingSources
  const handleRows = () => {
    let rows = [];
    let currentRow: IStakingSource[] = [];
    let rowSize = 3;
    if (props.stakingSources) {
      props.stakingSources.forEach((stakingSource, index) => {
        currentRow.push({ ...stakingSource, size: moonSizes[index] });

        if (currentRow.length === rowSize) {
          rows.push(currentRow);
          currentRow = [];
          rowSize = rowSize === 3 ? 4 : 3;
        }
      });

      if (currentRow.length) {
        rows.push(currentRow);
      }

      return rows;
    } else {
      return [];
    }
  };

  const rows = handleRows();

  return (
    <div className="bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl h-auto p-1 rounded-xl col-span-5">
      <div className="bg-slate-900 p-8 rounded-xl h-full">
        <div className="flex items-center mb-4">
          <h2 className="text-3xl text-white font-bold">Your Moons</h2>
          <button
            className="bg-green-600 rounded-full ml-2 p-1 inline"
            onClick={() => props.createStakingSource()}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth={2}
              stroke="currentColor"
              className="w-6 h-6"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M12 4.5v15m7.5-7.5h-15"
              />
            </svg>
          </button>
        </div>
        {rows.length > 0 ? (
          rows.map((stakingSources, index) => (
            <Row
              key={index}
              stakingSources={stakingSources}
              inventoryItems={props.inventoryItems}
              claimStake={props.claimStake}
              startStake={props.startStake}
            />
          ))
        ) : (
          <p className="text-white text-2xl">You don't have any moons</p>
        )}
      </div>
    </div>
  );
};

export default StakingSourcesView;
