import React, { useState } from 'react';
import { useDrag } from 'react-dnd';
import Block from './Block';
import Connection from './Connection';

const Toolbar = ({ onAddBlock }) => {
	//состояние для активной вкладки
	const [activeTab, setActiveTab] = useState('logical');

	const blockCategories = {
		logical: [
			{ type: 'AND', label: 'AND' },
			{ type: 'OR', label: 'OR' },
			{ type: 'NOT', label: 'NOT' },
			{ type: 'XOR', label: 'XOR' } ],
		arithmetic: [
			{ type: 'ADD', label: 'ADD' },
			{ type: 'SUB', label: 'SUB' },
			{ type: 'MUL', label: 'MUL' },
			{ type: 'DIV', label: 'DIV' } ],
		timers: [
			{ type: 'TON', label: 'TON' },
			{ type: 'TOF', label: 'TOF' },
			{ type: 'TP', label: 'TP' } ],
		counters: [
			{ type: 'CTU', label: 'CTU' },
			{ type: 'CTD', label: 'CTD' },
			{ type: 'CTUD', label: 'CTUD' } ],
		comparisons: [
			{ type: 'GT', label: 'GT' },
			{ type: 'LT', label: 'LT' },
			{ type: 'EQ', label: 'EQ' } ],
		other: [
			{ type: 'SR', label: 'SR' },
			{ type: 'RS', label: 'RS' },
			{ type: 'MOVE', label: 'MOVE' } ],
		customized: []
	};

	const activeBlocks = blockCategories[activeTab] || [];

	return (
		<div className = "toolbar">
			<h4 style = {{ marginTop: '3px', marginBottom: '15px' }}>Блоки</h4>
			
			<div className="toolbarElements">
				{/*//Вкладки*/}
				<div className = "tabButtons">
					{Object.keys (blockCategories).map((tab) => (
						<button
							key = {tab}
							className = {activeTab === tab ? 'activeTab' : ''}
							data-row = { tab === 'customized' || tab === 'other' || tab === 'comparisons' ? '2' : '1' }
							onClick = { () => setActiveTab(tab) }
							title = {
								tab === 'logical' ? 'Логические' :
								tab === 'arithmetic' ? 'Арифметические' :
								tab === 'timers' ? 'Таймеры' :
								tab === 'counters' ? 'Счётчики' :
								tab === 'comparisons' ? 'Сравнения' :
								tab === 'other' ? 'Другие' :
								'Пользовательские'
							}
						> {
							tab === 'logical' ? 'Логические' :
							tab === 'arithmetic' ? 'Арифметические' :
							tab === 'timers' ? 'Таймеры' :
							tab === 'counters' ? 'Счётчики' :
							tab === 'comparisons' ? 'Сравнения' :
							tab === 'other' ? 'Другие' :
							'Пользовательские'
						} </button>
					))}
				</div>

				{/*Блоки*/}
				<div className = "toolbarBlocks">
					{activeBlocks.map((block) => (
						<DraggableBlock key = {block.type} block = {block} onAddBlock = {onAddBlock} />
					))}
				</div>
			</div>
		</div>
	);
};

const DraggableBlock = ({ block, onAddBlock }) => {
	const [{ isDragging }, drag] = useDrag(() => ({
		type: 'block',
		item: block,
		end: (item, monitor) => {
			if (monitor.didDrop()) {}
		},
		collect: (monitor) => ({ //состояние
			isDragging: monitor.isDragging(),
		}),
	}));

	return (
		<div ref={drag} style={{ opacity: isDragging ? 0.7 : 1 }}>
			<Block type={block.type} label={block.label} />
		</div>
	);
};

export default Toolbar;