import React, {useState, useEffect} from 'react';

import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
import Divider from '@material-ui/core/Divider';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';

import WebhookImage from './assets/img/webhook.png';
import KafkaImage from './assets/img/kafka.png';

import EditWorkflow from "./EditWorkflow";

const EditWebhook = (props) => {
  	const { globalUrl, isLoaded } = props;

	// FIXME
	//const [webhookData, setWebhookData] = useState(webhooktest)
	const [webhookData, setWebhookData] = useState({})
	const [workflows, setWorkflows] = useState([])
	const [firstrequest, setFirstrequest] = React.useState(true);

	const [selectedWorkflows, setSelectedWorkflows] = useState([])

	const getWorkflows = () => {
		fetch(globalUrl+"/api/v1/workflows", {
    	  	method: 'GET',
				headers: {
					'Content-Type': 'application/json',
					'Accept': 'application/json',
				},
	  			credentials: "include",
    		})
		.then((response) => {
			if (response.status !== 200) {
				console.log("Status not 200 for workflows :O!")
			}
			return response.json()
		})
    	.then((responseJson) => {
			setWorkflows(responseJson)

		})
		.catch(error => {
    		console.log(error)
		});
	}

	const setWebhook = (inputdata) => {
		console.log(inputdata)

		fetch(globalUrl+"/api/v1/hooks/"+props.match.params.key, {
    	  	method: 'PUT',
				headers: {
					'Content-Type': 'application/json',
					'Accept': 'application/json',
				},
	  			credentials: "include",
				body: JSON.stringify(inputdata),
    		})
		.then((response) => response.json())
    	.then((responseJson) => {
			console.log(responseJson)
    	})
		.catch(error => {
    		console.log(error)
		});
	}

	const getCurrentWebhook = () => {
		fetch(globalUrl+"/api/v1/hooks/"+props.match.params.key, {
    	  	method: 'GET',
				headers: {
					'Content-Type': 'application/json',
					'Accept': 'application/json',
				},
	  			credentials: "include",
    		})
		.then((response) => {
			if (response.status !== 200) {
				console.log("Status not 200!")
				window.location.pathname = "webhooks"
			}
			return response.json()
		})
    	.then((responseJson) => {
			if (responseJson.actions === null) {
				responseJson.actions = []
			}

			if (responseJson.transforms === null) {
				responseJson.transforms = []
			}

			setWebhookData(responseJson)
    	})
		.catch(error => {
    		console.log(error)
			//window.location.pathname = "webhooks"
		});
	}

	useEffect(() => {
		if (firstrequest) {
			setFirstrequest(false)
			getCurrentWebhook()
			if (workflows.length <= 0) {
				getWorkflows()
			}
		}

		// After everything is loaded
		if (Object.getOwnPropertyNames(webhookData).length > 0 && webhookData.actions.length > 0 && workflows.length > 0 && selectedWorkflows.length === 0) {
			// Setting startup actions. making like this in case we want other actions
			var tmpActionWorkflows = []
			for (var key in webhookData.actions) {
				if (webhookData.actions[key].type === "workflow") {
					tmpActionWorkflows.push(webhookData.actions[key])
				}
			}

			// Fix duplicates... Meh
			var foundWorkflowIds = []
			var tmpWorkflows = []
			for (key in tmpActionWorkflows) {
				if (foundWorkflowIds.includes(tmpActionWorkflows[key].id)) {
					continue
				}

				for (var subkey in workflows) {
					if (tmpActionWorkflows[key].id === workflows[subkey]["id_"]) {
						console.log(tmpActionWorkflows[key].id, workflows[subkey]["id_"])
						foundWorkflowIds.push(tmpActionWorkflows[key].id)
						tmpWorkflows.push(workflows[subkey])
						break
					}
				}
			}

			if (tmpWorkflows.length > 0) {
				setSelectedWorkflows(tmpWorkflows)
			}
		}
	})


	const hookPicture = Object.getOwnPropertyNames(webhookData).length > 0 && webhookData.type === "webhook" ? 
		<img
			src={WebhookImage}
			alt="webhook"
			width="100px"
			height="100px"
		/>
		: 
		<img
			src={KafkaImage}
			alt="MQ"
			width="100px"
			height="100px"
		/>

	const executeHook = (action) => {
		fetch(globalUrl+"/api/v1/hooks/"+props.match.params.key+"/"+action, {
    	  	method: 'POST',
				headers: {
					'Content-Type': 'application/json',
					'Accept': 'application/json',
				},
	  			credentials: "include",
    		})
		.then((response) => response.json())
    	.then((responseJson) => {
			setWebhookData({})
    	})
		.catch(error => {
    		console.log(error)
		});
	}

	const headerPaperStyle = {
		display: "flex", 
		maxHeight: "800px", 
		minHeight: "800px", 
		margin: "10px 30px 10px 10px", 
		padding: "10px 5px 5px 5px",
		flexDirection: "column",
	}

	// FIXME - add with counter to change the correct one (not just edit)
	const addNewWorkflow = (event) => {
		// Verify if it already exists in the array. Returns if it exists
		for (var key in selectedWorkflows) {
			var item = selectedWorkflows[key]
			if (item["id_"] === event.target.value["id_"]) {
				return
			}
		}

		// FIXME - make this possible for all accounts
		if (selectedWorkflows.length === 0) {
			console.log("ADD FIRST ITEM FOR SELECTEDWORKFLOWS")
			console.log(event.target.value)

			// Cleanup previous actions
			var newActions = []
			if (webhookData.actions.length > 0) {
				for (key in webhookData.actions) {
					if (webhookData.actions[key].type === "" || webhookData.actions[key].type === undefined) {
						continue
					}

					newActions.push(webhookData.actions[key])
				}
			}  

			// FIXME - how to stringify this better hurr
			var formattedWorkflow = {
				"type": "workflow",
				"name": event.target.value.name,
				"id": event.target.value.id_,
				"field": "",
			}

			// FIXME: patch this n
			newActions.push(formattedWorkflow)
			console.log(newActions)

			webhookData.actions = newActions
			setWebhook(webhookData)
		}

		var tmpSelectedWorkflows = [].concat(selectedWorkflows, [event.target.value])
		setSelectedWorkflows(tmpSelectedWorkflows)
	}

	// FIXME 
	// Create a list with + button
	// For each, choose the new workflow I wanna add 
	// Current: JUST ONE
	const selectedWorkflowIds = selectedWorkflows.map(data => {return data["id_"]})
	const availableWorkflows = workflows.filter(data => !selectedWorkflowIds.includes(data["id_"]))

	const WorkflowSelect = (counter) => { 
		if (selectedWorkflows[counter.counter] === undefined) {
			return null 
		}

        console.log(selectedWorkflows[0])
        console.log(selectedWorkflows[0])
        console.log(selectedWorkflows[0])
        console.log(selectedWorkflows[counter.counter])
        console.log(selectedWorkflows[counter.counter].name)
		return (
			<div>
				Workflow select: 
				<Select
        		  	value={selectedWorkflows[counter.counter].name}
        		  	onChange={(event) => {addNewWorkflow(event, counter.counter)}}
					displayEmpty
					name="workflow"
        		>
					{availableWorkflows.map(data => (
						<MenuItem key={data.name} value={data} name={data.name}>{data.name}</MenuItem>	
					))} 
        	   </Select>
			</div>
		)
	}

	const extraWorkflow = workflows.length > 0 && availableWorkflows.length > 0 ?
		<WorkflowSelect counter={selectedWorkflows.length}/> : null

	const multiWorkflowSelect = workflows.length > 0 && selectedWorkflows.length > 0 ?
		<div>
			{selectedWorkflows.map((data, count) => (
				<WorkflowSelect key={count} counter={count}/>
			))} 
			{extraWorkflow}
		</div>
		: <WorkflowSelect counter={0}/>

	const headerInfo = Object.getOwnPropertyNames(webhookData).length > 0 ?
		<div>
			<Paper style={headerPaperStyle}>
				<div style={{display: "flex", flex: "1"}}>
					<div style={{flex: "1"}}>
						{hookPicture}		
					</div>
					<div style={{display: "flex", flexDirection: "column", flex: "5"}}>
						<div style={{flex: "1"}}>
							<h1>Name: {webhookData.info.name}</h1>
						</div>
					</div>
				</div>
				<div style={{flex: "4"}}>
					Description: {webhookData.info.description}
					<div>
						Id: {webhookData.id}
					</div>
					<div>
						Url: {webhookData.info.url}
					</div>
					<div>
						Type: {webhookData.type}
					</div>
					<div>
						Status: {webhookData.status}
					</div>
					<div>
						CHOOSE ACTIONS:
						{multiWorkflowSelect}
					</div>
				</div>
				<Divider />
				<div style={{flex: "1", display: "flex", flexDirection: "row"}}>
					<div style={{flex: "1"}}>
						<Button 
							disabled={webhookData.running === true && webhookData.name !== ""}
							onClick={() => {executeHook("start")}}
							style={{left: "50%", top: "50%", transform: "translate(-50%, -50%)"}}
							variant="outlined" 
							color="primary"
						>Start {webhookData.type}</Button>
					</div>
					<div style={{flex: "1"}}>
						<Button 
							disabled={webhookData.running === false}
							onClick={() => {executeHook("stop")}}
							style={{left: "50%", top: "50%", transform: "translate(-50%, -50%)"}}
							variant="outlined" 
							color="primary"
						>Stop {webhookData.type}</Button>
					</div>
				</div>
			</Paper>
		</div>
		: null
	
	// FIXME - needs refresh everytime you add a new workflow
	const workflowdata = Object.getOwnPropertyNames(webhookData).length > 0 && selectedWorkflows.length > 0 ?
		<EditWorkflow globalUrl={globalUrl} inputworkflows={selectedWorkflows} inputname={webhookData.info.name} inputtype={webhookData.type} /> : null	

	const loadedCheck = isLoaded ? 
		<div style={{display: "flex", backgroundColor: "#f7f7f7"}}>
			<div style={{"flex": 1}}>
				{workflowdata}
			</div>
			<div style={{"flex": 1}}>
				{headerInfo}
			</div>
		</div>
		:
		<div>
		</div>

	// FIXME: Use this for testing
	// <EditWorkflow globalUrl={globalUrl} inputname={"Helo?"} inputtype={"webhook"} /> : null	
	return (
		
		<div>
			{loadedCheck}
		</div>
	)
}

export default EditWebhook;