import React, { useState, useEffect } from 'react';
import history from '@history';
import { useForm, useDeepCompareEffect } from '@fuse/hooks';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import { useDispatch, useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';
import Icon from '@material-ui/core/Icon';
import TextField from '@material-ui/core/TextField';
import EditIcon from '@material-ui/icons/Edit';
import DeleteIcon from '@material-ui/icons/Delete';
import FuseLoading from '@fuse/core/FuseLoading';

import MenuItem from '@material-ui/core/MenuItem';
import { fromObject } from 'http-cache-semantics';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import * as Actions from '../../store/actions';

import AddNewProto from './AddNewProto';
import EditProto from './EditProto';

const useStyles = makeStyles(theme => ({
	mainBlock: {
		marginRight: '32px',

		width: '50%',
		display: 'table',
		[theme.breakpoints.down('xs')]: {
			marginRight: '0',
			minWidth: '100%'
		}
	},
	cardWrapper: {
		marginBottom: '32px',
		flex: 1,
		display: 'flex',
		flexDirection: 'column',
		border: '1px solid #E0E0E0',
		borderRadius: '4px',
		backgroundColor: theme.palette.background.paper,
		[theme.breakpoints.down('xs')]: {
			marginRight: '0',
			minWidth: '100%'
		}
	},
	cardHeader: {
		height: '60px',
		padding: '18px 24px',
		display: 'flex',
		justifyContent: 'space-between',
		color: theme.palette.secondary.main,
		borderBottom: '1px solid #E0E0E0',
		[theme.breakpoints.down('xs')]: {
			height: 'fit-content',
			flexWrap: 'wrap'
		}
	},
	cardHeaderEditButton: {
		display: 'flex',
		alignItems: 'center',
		cursor: 'pointer',
		color: theme.palette.primary.main,
		[theme.breakpoints.down('xs')]: {
			marginTop: '10px'
		}
	},
	cardHeaderCancelButton: {
		marginRight: '10px',
		display: 'flex',
		alignItems: 'center',
		cursor: 'pointer',
		color: theme.palette.error.main,
		[theme.breakpoints.down('xs')]: {
			marginTop: '10px'
		}
	},
	cardHeaderAddButton: {
		display: 'flex',
		alignItems: 'center',
		cursor: 'pointer',
		color: theme.palette.primary.main
	},
	cardHeaderSaveButton: {
		display: 'flex',
		alignItems: 'center',
		cursor: 'pointer',
		color: theme.palette.success.main,
		[theme.breakpoints.down('xs')]: {
			marginTop: '10px'
		}
	},
	cardContent: {
		padding: '23px',
		display: 'flex',
		flexWrap: 'wrap',
		justifyContent: 'space-between'
	},
	cardTable: {
		padding: '0 23px 48px 23px',
		[theme.breakpoints.down('xs')]: {
			padding: '5px'
		}
	}
}));

const StyledTableCell = withStyles(theme => ({
	head: {
		color: theme.palette.secondary.main,
		paddingLeft: 0
	},
	body: {
		color: theme.palette.secondary.main,
		paddingLeft: 0
	}
}))(TableCell);

const ActionsTableCell = withStyles(theme => ({
	body: {
		color: theme.palette.secondary.main,
		width: '100px'
	}
}))(TableCell);

export default function Proto(props) {
	const [isEditName, setIsEditName] = useState(false);
	const [currentForm, setCurrentForm] = useState('');
	const [stageEditIndex, setStageEditIndex] = useState('');

	const { form, handleChange, setForm, setInForm } = useForm({
		name: '',
		stage_protos: []
	});

	const classes = useStyles(props);
	const dispatch = useDispatch();
	const routeParams = useParams();

	const proto = useSelector(({ settings }) => settings.projectProto.proto);
	const stagesList = useSelector(({ settings }) => settings.projectProto.stageProtosList);
	const isGetProtoError = useSelector(({ settings }) => settings.projectProto.isGetProtoError);
	const isProjectProtoPending = useSelector(({ settings }) => settings.projectProto.isProjectProtoPending);
	const isStagePending = useSelector(({ settings }) => settings.projectProto.isStagePending);
	const isDataPending = isProjectProtoPending || isStagePending;
	console.log(proto);
	useEffect(() => {
		const { protoId } = routeParams;
		dispatch(Actions.getProtoById(protoId));
		dispatch(Actions.getStageProtos());
	}, []);

	useEffect(() => {
		setForm(proto);
	}, [proto]);

	useEffect(() => {
		if (isGetProtoError) {
			history.push('/error-404');
		}
	}, [isGetProtoError]);

	const saveName = () => {
		if (form.name !== proto.name) {
			const data = {
				name: form.name
			};
			dispatch(Actions.updateProjectProto(proto.id, data));
		}
		setIsEditName(false);
	};

	const openAddForm = () => {
		setStageEditIndex('');
		setCurrentForm('addNew');
	};

	const openEditForm = index => {
		setStageEditIndex(index);
		setCurrentForm('edit');
	};

	const deleteStageFromProto = index => {
		const stageId = form.stage_protos[index].id;
		dispatch(Actions.deleteStageOfProject(proto.id, stageId));
	};

	return isDataPending ? (
		<FuseLoading />
	) : (
		<div className="md:p-32 p-12 flex flex-wrap">
			<div className={classes.mainBlock}>
				<div className={classes.cardWrapper}>
					<div className={classes.cardHeader}>
						<h4>Информация о бизнес-процессе</h4>
						{!isEditName ? (
							<span
								className={classes.cardHeaderEditButton}
								onClick={() => setIsEditName(true)}
								role="button"
							>
								<Icon>edit</Icon>
								Редактировать
							</span>
						) : (
							<div className="flex justify-between">
								<span className={classes.cardHeaderSaveButton} onClick={saveName}>
									<Icon>check</Icon>
									Сохранить
								</span>
							</div>
						)}
					</div>
					<div className={classes.cardContent}>
						<TextField
							className="mb-20"
							label="Наименование бизнес-процесса"
							type="text"
							name="name"
							value={form.name}
							onChange={handleChange}
							variant="outlined"
							fullWidth
							required
							disabled={!isEditName}
						/>
					</div>
				</div>
				<div className={classes.cardWrapper}>
					<div className={classes.cardHeader}>
						<h4>Этапы</h4>
						<span className={classes.cardHeaderAddButton} onClick={openAddForm} role="button">
							<Icon>add</Icon>
							Добавить этап
						</span>
					</div>
					<div className={classes.cardTable}>
						<TableContainer>
							<Table color="secondary" aria-label="simple table">
								<TableHead>
									<TableRow>
										<StyledTableCell>Наименование</StyledTableCell>
										<StyledTableCell>Порядок</StyledTableCell>
										<StyledTableCell>Действия</StyledTableCell>
									</TableRow>
								</TableHead>
								<TableBody>
									{form.stage_protos &&
										form.stage_protos.map((row, index) => (
											<TableRow key={row.id}>
												<StyledTableCell component="th" scope="row">
													{row.name}
												</StyledTableCell>
												<StyledTableCell>{row.order}</StyledTableCell>

												<ActionsTableCell>
													<EditIcon
														className="w-16 text-black cursor-pointer"
														onClick={() => openEditForm(index)}
													/>
													<DeleteIcon
														className="md:ml-32 ml-12 text-black w-16 cursor-pointer"
														onClick={() => deleteStageFromProto(index)}
													/>
												</ActionsTableCell>
											</TableRow>
										))}
								</TableBody>
							</Table>
						</TableContainer>
					</div>
				</div>
			</div>
			{currentForm === 'addNew' && (
				<AddNewProto stages={stagesList} protoId={proto.id} setCurrentForm={setCurrentForm} />
			)}
			{currentForm === 'edit' && (
				<EditProto
					stage={form.stage_protos[stageEditIndex]}
					protoId={proto.id}
					setCurrentForm={setCurrentForm}
				/>
			)}
		</div>
	);
}