import { useTranslations } from 'next-intl'

import { TbChevronLeft, TbChevronRight } from 'react-icons/tb'

import { Button } from '@/components/atoms'

import { useCreateDataset } from '@/hooks'

type NavigateProps = {
	activeTab: string
	prevTabHandler: any
	nextTabHandler: any
}

function Navigate({
	activeTab,
	prevTabHandler,
	nextTabHandler
}: NavigateProps) {
	const t = useTranslations('')
	//
	const { sourceType, fileInfo, columns } = useCreateDataset()
	//
	const hasDisabled = () => {
		switch (activeTab) {
			case 'step2': {
				return sourceType === 'file' && !fileInfo
			}
			case 'step3': {
				return !columns.length
			}
			default: {
				return false
			}
		}
	}

	return (
		<div
			className='mt-auto flex justify-between'
			hidden={activeTab === 'step4'}
		>
			<Button
				color='secondary'
				variant='label'
				onClick={prevTabHandler}
				disabled={activeTab === 'step1'}
			>
				<TbChevronLeft />
				{t('back')}
			</Button>
			<Button onClick={nextTabHandler} disabled={hasDisabled()}>
				{t('further')} <TbChevronRight />
			</Button>
		</div>
	)
}

export { Navigate }
