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 './store/actions';


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 { productsList, 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">
										{`Подтвердите удаление бизнес-процесса ${productsList[index].name}?`}
									</DialogTitle>

									<DialogActions>
										<Button onClick={() => store.dispatch(closeDialog())} color="primary">
											Отмена
										</Button>
										<Button
											// onClick={() => deleteProto(protosList[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('');
	useEffect(() => {
		const path = routeParams.pathname.split('/');
		const type = path[path.length - 1];
		if (type === 'products') {
			store.dispatch(Actions.getProductType());
			store.dispatch(setToolbarTitle('Товары'));
			setCurrentType('1');
			setTableTitle('Список товаров');
		} else if (type === 'materials') {
			store.dispatch(Actions.getMaterialType());
			store.dispatch(setToolbarTitle('Материалы'));
			setCurrentType('2');
			setTableTitle('Список материалов');
		} else if (type === 'metals') {
			store.dispatch(Actions.getMetalType());
			store.dispatch(setToolbarTitle('Металл'));
			setCurrentType('3');
			setTableTitle('Список металлов');
		} else if (type === 'furniture') {
			store.dispatch(Actions.getFurnitureType());
			store.dispatch(setToolbarTitle('Фурнитура'));
			setCurrentType('4');
			setTableTitle('Список фурнитуры');
		} else if (type === 'paint') {
			store.dispatch(Actions.getPaintType());
			store.dispatch(setToolbarTitle('Краска'));
			setCurrentType('5');
			setTableTitle('Список красок');
		} else if (type === 'details') {
			store.dispatch(Actions.getDetailType());
			store.dispatch(setToolbarTitle('Готовая продукция'));
			setCurrentType('6');
			setTableTitle('Список готовой продукции');
		}
	}, []);

	const productsList = useSelector(({ nomenclature }) => nomenclature.nomenclature.type);
	const isTypesPending = useSelector(({ nomenclature }) => nomenclature.nomenclature.isTypesPending);
	const isDataPending = isTypesPending;
	const { form, handleChange, resetForm, setForm } = useForm({
		name: '',
		type: '',
		vendor_code: '',
		total_cost: ''
	});
	const openEditModal = index => {
		setForm(productsList[index]);
		setIsEditModalOpen(true);
	};

	const closeEditModal = () => {
		resetForm();
		setIsEditModalOpen(false);
	};
	const typesName = id => {
		let name = id;
		const currentType = productsList.find(type => type.value === id);
		if (currentType) {
			name = currentType.name;
		}
		return name;
	};

	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 => typesName(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}
							productsList={productsList}
							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={productsList}
						columns={columns}
						options={options}
					/>
				</MuiThemeProvider>
				<Dialog open={isEditModalOpen} onClose={closeEditModal} aria-labelledby="form-dialog-title">
					<IconButton aria-label="close" className={classes.closeButton} onClick={closeEditModal}>
						<CloseIcon />
					</IconButton>
					<DialogTitle id="alert-dialog-title">Редактирование справочника</DialogTitle>
					<div className={classes.dialogContent}>
						<TextField
							className="mb-16"
							label="Наименование"
							autoFocus
							type="text"
							name="name"
							value={form.name}
							onChange={handleChange}
							variant="outlined"
							required
							fullWidth
						/>
						<TextField
							className="mb-16"
							label="Тип"
							autoFocus
							type="text"
							name="type"
							value={form.type}
							onChange={handleChange}
							variant="outlined"
							required
							fullWidth
						/>
						<TextField
							className="mb-16"
							label="Код"
							autoFocus
							type="text"
							name="vendor_code"
							value={form.vendor_code}
							onChange={handleChange}
							variant="outlined"
							required
							fullWidth
						/>
						<TextField
							className="mb-16"
							label="Стоимость"
							autoFocus
							type="text"
							name="total_cost"
							value={form.total_cost}
							onChange={handleChange}
							variant="outlined"
							required
							fullWidth
						/>
					</div>
					<DialogActions>
						<Button onClick={closeEditModal} color="primary">
							Отмена
						</Button>
						{/* <Button onClick={updateHandbook} color="primary" autoFocus> */}
						{/*	Сохранить */}
						{/* </Button> */}
					</DialogActions>
				</Dialog>
			</Paper>
			{/* <AddHandbook isOpen={isAddOpen} close={() => setIsAddOpen(false)} /> */}
		</>
	);
}

export default Nomenclature;