import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';

import type { CompanyDbModel } from '../Pages/Companies/Components/CompaniesComponents.helper';
import type { RootState } from '../ReduxState/store';

const useCurrencyLabel = (): { currencyLabel: string; currencySign: string } => {
	const selectedCompany = useSelector(
		(state: RootState): CompanyDbModel | null => state.companies.selectedCompany
	);
	const [currencyLabel, setCurrencyLabel] = useState<string>('GBP');
	const [currencySign, setCurrencySign] = useState<string>('£');
	useEffect(() => {
		if (selectedCompany) {
			setCurrencyLabel(
				`${
					typeof selectedCompany?.currency_symbol === 'string'
						? 'GBP'
						: selectedCompany?.currency_symbol.value
				}`
			);
			setCurrencySign(
				`${
					typeof selectedCompany?.currency_symbol === 'string'
						? '£'
						: selectedCompany?.currency_symbol.label
				}`
			);
		}
	}, [selectedCompany]);

	return { currencyLabel, currencySign };
};

export default useCurrencyLabel;