import React, { useState, useEffect } from 'react';
import history from '@history';
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import { useSelector } from 'react-redux';
import MUIDataTable from 'mui-datatables';
import FuseLoading from '@fuse/core/FuseLoading';
import TextField from '@material-ui/core/TextField';
import Paper from '@material-ui/core/Paper';
import EditIcon from '@material-ui/icons/Edit';
import DeleteIcon from '@material-ui/icons/Delete';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import DialogTitle from '@material-ui/core/DialogTitle';
import store from 'app/store';
import Button from '@material-ui/core/Button';
import { openDialog, closeDialog, setToolbarTitle } from 'app/store/actions';
import { useForm } from '@fuse/hooks';
import { useLocation } from 'react-router';
import * as Actions from '../projects/store/actions';
import AddMaterial from '../projects/project/drawers/AddMaterial';
import AddMetal from '../projects/project/drawers/AddMetal';
import AddFurniture from '../projects/project/drawers/AddFurniture';
import AddPaint from '../projects/project/drawers/AddPaint';

const useStyles = makeStyles(theme => ({
	addButton: {
		position: 'absolute',
		top: '15px',
		right: '270px',
		width: '112px',
		fontSize: '14px',
		fontWeight: 'normal',
		[theme.breakpoints.down('xs')]: {
			position: 'static'
		}
	},
	closeButton: {
		position: 'absolute',
		right: theme.spacing(1),
		top: theme.spacing(1),
		color: theme.palette.grey[500]
	},
	dialogContent: {
		padding: '16px',
		width: '350px',
		[theme.breakpoints.down('xs')]: {
			width: '100%'
		}
	}
}));

function TableActions(props) {
	const { currentList, index, openEditModal } = props;
	return (
		<div>
			<EditIcon className="text-black cursor-pointer" />
			<DeleteIcon
				className="md:ml-32 ml-12 text-black cursor-pointer"
				onClick={e => {
					e.stopPropagation();
					store.dispatch(
						openDialog({
							children: (
								<>
									<DialogTitle id="alert-dialog-title">
										{`Подтвердите удаление бизнес-процесса ${currentList[index].name}?`}
									</DialogTitle>

									<DialogActions>
										<Button onClick={() => store.dispatch(closeDialog())} color="primary">
											Отмена
										</Button>
										<Button
											// onClick={() => deleteProto(filteredProductsList[index].id)}
											color="primary"
											autoFocus
										>
											Удалить
										</Button>
									</DialogActions>
								</>
							)
						})
					);
				}}
			/>
		</div>
	);
}

function Nomenclature(props) {
	const [isAddOpen, setIsAddOpen] = useState(false);
	const [isEditModalOpen, setIsEditModalOpen] = useState(false);
	const routeParams = useLocation();
	const classes = useStyles();
	const [currentType, setCurrentType] = useState('');
	const [tableTitle, setTableTitle] = useState('');
	const path = routeParams.pathname.split('/');
	const type = path[path.length - 1];
	const productList = useSelector(({ projects }) => projects.productTypes);
	const materialList = useSelector(({ projects }) => projects.materialTypes);
	const metalList = useSelector(({ projects }) => projects.metalTypes);
	const furnitureList = useSelector(({ projects }) => projects.furnitureTypes);
	const paintList = useSelector(({ projects }) => projects.paintTypes);
	const detailList = useSelector(({ projects }) => projects.detailTypes);
	const { isOpen, close } = props;
	let currentList = [];
	useEffect(() => {
		store.dispatch(Actions.getProductTypes());
		store.dispatch(Actions.getMaterialTypes());
		store.dispatch(Actions.getMetalTypes());
		store.dispatch(Actions.getFurnitureTypes());
		store.dispatch(Actions.getPaintTypes());
		store.dispatch(Actions.getDetailTypes());
		if (type === 'products') {
			currentList = productList;
			store.dispatch(setToolbarTitle('Товары'));
			setCurrentType(5);
			setTableTitle('Список товаров');
		} else if (type === 'materials') {
			currentList = materialList;
			store.dispatch(setToolbarTitle('Материалы'));
			setCurrentType(3);
			setTableTitle('Список материалов');
		} else if (type === 'metals') {
			currentList = metalList;
			store.dispatch(setToolbarTitle('Металл'));
			setCurrentType(6);
			setTableTitle('Список металлов');
		} else if (type === 'furniture') {
			currentList = furnitureList;
			store.dispatch(setToolbarTitle('Фурнитура'));
			setCurrentType(1);
			setTableTitle('Список фурнитуры');
		} else if (type === 'paint') {
			currentList = paintList;
			store.dispatch(setToolbarTitle('Краска'));
			setCurrentType(2);
			setTableTitle('Список красок');
		} else if (type === 'details') {
			currentList = detailList;
			store.dispatch(setToolbarTitle('Готовая продукция'));
			setCurrentType(4);
			setTableTitle('Список готовой продукции');
		}
	}, []);
	console.log(currentList);
	console.log(materialList);
	const isTypesPending = useSelector(({ projects }) => projects.isTypesPending);
	const isDataPending = isTypesPending;
	const { form, handleChange, resetForm, setForm } = useForm({
		name: '',
		type: '',
		vendor_code: '',
		total_cost: ''
	});
	const openEditModal = index => {
		setForm(currentList[index]);
		setIsEditModalOpen(true);
	};

	const closeEditModal = () => {
		resetForm();
		setIsEditModalOpen(false);
	};
	const typeTitle = {
		1: 'Фурнитура',
		2: 'Краска',
		3: 'Материал',
		4: 'Готовая продукция',
		5: 'Товар',
		6: 'Металл'
	};
	const updateProduct = () => {
		const product = {
			name: form.name,
			type: form.type,
			vendor_code: form.vendor_code,
			total_cost: form.total_cost
		};

		// store.dispatch(Actions.updateHandbook(form.key, handbook));
		closeEditModal();
		resetForm();
	};

	const columns = [
		{
			name: '№',
			label: '',
			viewColumns: false,
			options: {
				filter: false,
				sort: false,
				customBodyRenderLite: dataIndex => {
					return <span>{dataIndex + 1}</span>;
				},
				setCellHeaderProps: value => {
					return {
						style: {
							width: '150px'
						}
					};
				}
			}
		},
		{
			name: 'name',
			label: 'Наименование',
			options: {
				filter: true,
				sort: false
			}
		},
		{
			name: 'type',
			label: 'Тип',
			options: {
				filter: true,
				sort: false,
				customBodyRender: value => typeTitle[value]
			}
		},
		{
			name: 'vendor_code',
			label: 'Код',
			options: {
				filter: true,
				sort: false
			}
		},
		{
			name: 'total_cost',
			label: 'Стоимость',
			options: {
				filter: true,
				sort: false
			}
		},
		{
			name: 'actions',
			label: 'Действия',
			options: {
				filter: false,
				sort: false,
				customBodyRenderLite: dataIndex => {
					return (
						<TableActions
							index={dataIndex}
							filteredProductsList={currentList}
							openEditModal={openEditModal}
							closeEditModal={closeEditModal}
						/>
					);
				},
				setCellHeaderProps: value => {
					return {
						style: {
							width: '150px'
						}
					};
				}
			}
		}
	];
	const options = {
		filter: true,
		filterType: 'dropdown',
		responsive: 'scroll',
		tableBodyHeight: '100%',
		tableBodyMaxHeight: '100%',
		fixedSelectColumn: false,
		selectableRows: 'none',
		customToolbar: propsA => {
			return (
				<Button
					variant="contained"
					color="primary"
					className={classes.addButton}
					onClick={() => setIsAddOpen(true)}
				>
					Добавить
				</Button>
			);
		},

		// onRowClick: (rowIndex, rowMeta) => history.push(`/settings/handbooks/${handbooksList[rowMeta.dataIndex].key}`),

		textLabels: {
			body: {
				noMatch: 'Данных нет',
				toolTip: 'Sort',
				columnHeaderTooltip: column => `Sort for ${column.label}`
			},
			pagination: {
				next: 'Следующая страница',
				previous: 'Предыдущая страница',
				rowsPerPage: 'Записей на странице:',
				displayRows: 'из'
			},
			toolbar: {
				search: 'Поиск',
				downloadCsv: 'Загрузить в облако',
				print: 'Печать',
				viewColumns: 'Посмотреть столбцы',
				filterTable: 'Фильтрация'
			},
			filter: {
				all: 'Все',
				title: 'ФИЛЬТРЫ',
				reset: 'Сбросить'
			},
			viewColumns: {
				title: 'Показать столбцы',
				titleAria: 'Show/Hide Table Columns'
			},
			selectedRows: {
				text: 'row(s) selected',
				delete: 'Delete',
				deleteAria: 'Delete Selected Rows'
			}
		}
	};

	return isDataPending ? (
		<FuseLoading />
	) : (
		<>
			<Paper className="md:m-32 m-12">
				<MuiThemeProvider
					theme={theme =>
						createMuiTheme({
							...theme,
							overrides: {
								MUIDataTableToolbar: {
									root: {
										color: theme.palette.secondary.main
									}
								},
								MUIDataTableHeadCell: {
									root: {
										color: theme.palette.secondary.main
									}
								},
								MUIDataTableBodyCell: {
									root: {
										color: theme.palette.secondary.main
									}
								},
								MUIDataTableFilter: {
									title: {
										color: theme.palette.secondary.main,
										fontWeight: 'bold'
									},
									resetLink: {
										color: theme.palette.primary.main,
										fontWeight: 'normal'
									}
								}
							}
						})
					}
				>
					<MUIDataTable
						title="Список изделий и материалов"
						data={currentList}
						columns={columns}
						options={options}
					/>
				</MuiThemeProvider>
			</Paper>
			{type === 'materials' && <AddMaterial isOpen={isAddOpen} close={() => setIsAddOpen(false)} />}
			{type === 'metals' && <AddMetal isOpen={isAddOpen} close={() => setIsAddOpen(false)} />}
			{type === 'furniture' && <AddFurniture isOpen={isAddOpen} close={() => setIsAddOpen(false)} />}
			{type === 'paint' && <AddPaint isOpen={isAddOpen} close={() => setIsAddOpen(false)} />}
		</>
	);
}

export default Nomenclature;