'use client'

import { useTranslations } from 'next-intl'
import { useState } from 'react'

import {
	TbColumns3,
	TbFileAnalytics,
	TbInfoOctagon,
	TbIrregularPolyhedron
} from 'react-icons/tb'

import { Tabs, Typography } from '@/components/atoms'

import { CreateDatasetProvider } from '@/providers'

import { Navigate } from './Navigate'
import { Step } from './Step'
import { Step1, Step2, Step3, Step4 } from './Steps'

const { Title, Paragraph } = Typography

type DatasetCreationProps = {}

function DatasetCreation({}: DatasetCreationProps) {
	const t = useTranslations('datasets.creation')
	//
	const [activeTab, setActiveTab] = useState('step1')
	//
	const prevTabHandler = () => {
		const currentTab = activeTab[activeTab.length - 1]
		setActiveTab('step' + (+currentTab - 1))
	}
	//
	const nextTabHandler = () => {
		const currentTab = activeTab[activeTab.length - 1]
		setActiveTab('step' + (+currentTab + 1))
	}

	return (
		<div className='p-10'>
			<div className='mb-3 text-center'>
				<Title level={3} className='mb-3'>
					{t('title')}
				</Title>
				<Paragraph className='mb-6'>{t('info')}</Paragraph>
			</div>

			<Tabs value={activeTab} onValueChange={setActiveTab}>
				<div className='flex gap-x-15'>
					<div className='flex flex-col gap-y-6'>
						<Step
							num={'one'}
							icon={<TbIrregularPolyhedron />}
							isActive={activeTab === 'step1'}
						/>
						<Step
							num={'two'}
							icon={<TbFileAnalytics />}
							isActive={activeTab === 'step2'}
						/>
						<Step
							num={'three'}
							icon={<TbColumns3 />}
							isActive={activeTab === 'step3'}
						/>
						<Step
							num={'four'}
							icon={<TbInfoOctagon />}
							isActive={activeTab === 'step4'}
						/>
					</div>
					<div className='flex w-md flex-col'>
						<CreateDatasetProvider>
							<div>
								<Tabs.Content value='step1'>
									<Step1 />
								</Tabs.Content>
								{/*  */}
								<Tabs.Content value='step2'>
									<Step2 />
								</Tabs.Content>
								{/*  */}
								<Tabs.Content value='step3'>
									<Step3 />
								</Tabs.Content>
								{/*  */}
								<Tabs.Content value='step4'>
									<Step4 prevTabHandler={prevTabHandler} />
								</Tabs.Content>
							</div>
							<Navigate
								activeTab={activeTab}
								prevTabHandler={prevTabHandler}
								nextTabHandler={nextTabHandler}
							/>
						</CreateDatasetProvider>
					</div>
				</div>
			</Tabs>
		</div>
	)
}

export { DatasetCreation }
