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 * 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 { protosList, index, deleteProto, openEditModal } = props;

	return (
		<div>
			<EditIcon className="text-black" />
			<DeleteIcon
				className="md:ml-32 ml-12 text-black"
				onClick={e => {
					e.stopPropagation();
					store.dispatch(
						openDialog({
							children: (
								<>
									<DialogTitle id="alert-dialog-title">
										{`Подтвердите удаление бизнес-процесса ${protosList[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 ProjectsProtos(props) {
	const [isAddModalOpen, setIsAddModalOpen] = useState(false);
	const [isEditModalOpen, setIsEditModalOpen] = useState(false);

	const classes = useStyles();

	useEffect(() => {
		store.dispatch(Actions.getProjectsProtos());
		store.dispatch(setToolbarTitle('Бизнес-процессы'));
	}, []);

	const protosList = useSelector(({ settings }) => settings.projectProto.projectProtos);
	const isProjectProtosPending = useSelector(({ settings }) => settings.projectProto.isProjectProtosPending);
	const isProjectProtoPending = useSelector(({ settings }) => settings.projectProto.isProjectProtoPending);
	const isDataPending = isProjectProtosPending || isProjectProtoPending;
	const protosList1 = useSelector(({ settings }) => settings.projectProto.proto);
	const { form, handleChange, resetForm, setForm } = useForm({
		name: ''
	});

	const openEditModal = index => {
		setForm(protosList[index]);
		setIsEditModalOpen(true);
	};

	const closeEditModal = () => {
		resetForm();
		setIsEditModalOpen(false);
	};

	const openAddModal = () => {
		resetForm();
		setIsAddModalOpen(true);
	};

	const closeAddModal = () => {
		resetForm();
		setIsAddModalOpen(false);
	};

	const createProto = () => {
		const proto = {
			name: form.name
		};
		store.dispatch(Actions.addProjectProto(proto));
		closeAddModal();
	};

	const deleteProto = id => {
		store.dispatch(Actions.deleteProjectProto(id));
		store.dispatch(closeDialog());
	};

	const updateProto = () => {
		const proto = {
			name: form.name
		};

		store.dispatch(Actions.updateProjectProto(form.id, proto));
		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: 'actions',
			label: 'Действия',
			options: {
				filter: false,
				sort: false,
				customBodyRenderLite: dataIndex => {
					return (
						<TableActions
							index={dataIndex}
							protosList={protosList}
							openEditModal={openEditModal}
							closeEditModal={closeEditModal}
							deleteProto={deleteProto}
						/>
					);
				},
				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={openAddModal}>
					Добавить
				</Button>
			);
		},

		onRowClick: (rowIndex, rowMeta) => history.push(`/settings/projectproto/${protosList[rowMeta.dataIndex].id}`),

		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={protosList}
						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
						/>
					</div>
					<DialogActions>
						<Button onClick={closeEditModal} color="primary">
							Отмена
						</Button>
						<Button onClick={updateProto} color="primary" autoFocus>
							Сохранить
						</Button>
					</DialogActions>
				</Dialog>
				<Dialog open={isAddModalOpen} onClose={closeAddModal} aria-labelledby="form-dialog-title">
					<IconButton aria-label="close" className={classes.closeButton} onClick={closeAddModal}>
						<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
						/>
					</div>
					<DialogActions>
						<Button onClick={closeAddModal} color="primary">
							Отмена
						</Button>
						<Button disabled={form.name === ''} onClick={createProto} color="primary" autoFocus>
							Сохранить
						</Button>
					</DialogActions>
				</Dialog>
			</Paper>
		</>
	);
}

export default ProjectsProtos;