file.tsx

import useUal from "@/hooks/useUal";
import { ButtonStyled } from "./ButtonStyled";
import { AssetsActionProps } from "@/typings/shared";
import { useCallback, useEffect, useState } from "react";

enum BUTTONS {
	NOT_LOGGED = "NOT_LOGGED",
	ON_AUCTION = "ON_AUCTION",
	ON_SALE = "ON_SALE",
	PUT_ON_SALE = "PUT_ON_SALE",
	PUT_ON_AUCTION = "PUT_ON_AUCTION",
	NOT_ON_SALE = "NOT_ON_SALE",
}

type ButtonsKeys = keyof typeof BUTTONS;

interface Payload {
	label:
		| "Login to Buy/Sell"
		| "Cancel Bid"
		| "Place a Bid"
		| "Purchase Now"
		| "Put on Auction"
		| "Put on Sale"
		| "Cancel Sale"
		| "This asset is not on sale";
	action?: VoidFunction;
}

const ButtonDefaultProps = {
	type: "primary",
	size: "large",
	shape: "round",
	block: true,
};

const NotLogged = ({ action, label, ...rest }: Payload) => (
	<ButtonStyled onClick={action} {...rest}>
		{label}
	</ButtonStyled>
);

const OnAuction = ({ action, label, ...rest }: Payload) => (
	<ButtonStyled onClick={action} {...rest}>
		{label}
	</ButtonStyled>
);

const OnSale = ({ action, label, ...rest }: Payload) => (
	<ButtonStyled onClick={action} {...rest}>
		{label}
	</ButtonStyled>
);

const PutOnSale = ({ action, label, ...rest }: Payload) => (
	<ButtonStyled onClick={action} {...rest}>
		{label}
	</ButtonStyled>
);

const PutOnAuction = ({ action, label, ...rest }: Payload) => (
	<ButtonStyled onClick={action} {...rest}>
		{label}
	</ButtonStyled>
);

const NotOnSale = ({ label, ...rest }: Payload) => (
	<ButtonStyled disabled {...rest}>
		<span>{label}</span>
	</ButtonStyled>
);

const getButtonComponent = (key: ButtonsKeys) => {
	const BUTTON_ACTIONS_BUTTON = {
		[BUTTONS.NOT_LOGGED]: NotLogged,
		[BUTTONS.ON_AUCTION]: OnAuction,
		[BUTTONS.ON_SALE]: OnSale,
		[BUTTONS.PUT_ON_SALE]: PutOnSale,
		[BUTTONS.PUT_ON_AUCTION]: PutOnAuction,
		[BUTTONS.NOT_ON_SALE]: NotOnSale,
	};
	return BUTTON_ACTIONS_BUTTON[key];
};

export interface ButtonAssetsAction {
	key: ButtonsKeys;
	params: Payload;
}

export default function AssetsAction({
	onAuction,
	onClick,
	onSale,
	item,
	onCreateAuction,
}: AssetsActionProps) {
	const { loggedIn, accountName, login } = useUal();
	const owner = item?.owner;

	const [buttons, setButtons] = useState<ButtonAssetsAction[]>([]);

	const whichButtonRender = useCallback(() => {
		if (!loggedIn) {
			setButtons([
				{
					key: "NOT_LOGGED",
					params: { action: login, label: "Login to Buy/Sell" },
				},
			]);

			return;
		}

		if (onAuction) {
			setButtons([
				{
					key: "ON_AUCTION",
					params: {
						action: onClick,
						label: owner === accountName ? "Cancel Bid" : "Place a Bid",
					},
				},
			]);
			return;
		}

		if (onSale) {
			setButtons([
				{
					key: "ON_SALE",
					params: {
						action: onClick,
						label: owner === accountName ? "Cancel Sale" : "Purchase Now",
					},
				},
			]);
			return;
		} else if (owner === accountName) {
			setButtons([
				{
					key: "PUT_ON_SALE",
					params: { action: onClick, label: "Put on Sale" },
				},
				{
					key: "PUT_ON_AUCTION",
					params: { action: onCreateAuction, label: "Put on Auction" },
				},
			]);
			return;
		} else {
			setButtons([
				{
					key: "NOT_ON_SALE",
					params: { label: "This asset is not on sale" },
				},
			]);
			return;
		}
	}, [
		loggedIn,
		owner,
		accountName,
		onClick,
		onSale,
		onAuction,
		onCreateAuction,
	]);

	useEffect(() => {
		whichButtonRender();
	}, [
		loggedIn,
		owner,
		accountName,
		onClick,
		onSale,
		onAuction,
		onCreateAuction,
	]);

	const renderButtons = () => {
		const mapButtons = buttons.map(({ key, params }) => {
			const Button = getButtonComponent(key);

			return (
				<div key={String(key)}>
					<Button {...{ ...params, ...ButtonDefaultProps }} />
				</div>
			);
		});

		return mapButtons.length !== 0 ? mapButtons : null;
	};

	return renderButtons();
}