import React, { Component, useState } from "react";
import { connect } from "react-redux";
import { RemoteService } from "../../remote";
import "./Automations.css";
import {
    Segment,
    Grid,
    Icon,
    Header,
    Input,
    Button,
    List,
    Dropdown,
    Form,
    Divider,
    Checkbox,
    Menu,
    Label,
} from "semantic-ui-react";

const options = [
    { key: "equal", text: "=", value: "equal" },
    {
        key: "greater-than-or-equal",
        text: "\u2265",
        value: "greater-than-or-equal",
    },
    {
        key: "greater-than",
        text: ">",
        value: "greater-than",
    },
    {
        key: "less-than-or-equal",
        text: "\u2264",
        value: "less-than-or-equal",
    },
    {
        key: "less-than",
        text: "<",
        value: "less-than",
    },
];

const CreateTrigger = (props) => {
    const devices = [
        { key: "Light-1", text: "Light-1", value: "Light-1" },
        { key: "Light-2", text: "Light-2", value: "Light-2" },
        { key: "SmartPlug-1", text: "SmartPlug-1", value: "SmartPlug-1" },
        { key: "SmartPlug-2", text: "SmartPlug-2", value: "SmartPlug-2" },
    ];

    return (
        <List.Item>
            <List.Content>
                <Form>
                    <Form.Group>
                        <Form.Field inline width={7}>
                            <Dropdown
                                onChange={(e, val) => props.inputChange(val)}
                                name="device"
                                search
                                selection
                                options={devices}
                                placeholder="Device"
                            />
                        </Form.Field>

                        <Form.Field inline width={2}>
                            <Dropdown
                                onChange={(e, val) => props.inputChange(val)}
                                name="operand"
                                compact
                                selection
                                options={options}
                            />
                        </Form.Field>
                        <Form.Field inline width={7}>
                            <Input
                                onChange={(e, val) => props.inputChange(val)}
                                name="value"
                                type="number"
                                placeholder="Value"
                            />
                        </Form.Field>
                    </Form.Group>
                </Form>
            </List.Content>
        </List.Item>
    );
};

const SceneItem = (props) => {
    return (
        <List.Item>
            <List.Header>
                <Grid textAlign="center">
                    <Grid.Row>
                        <Grid.Column width={4}>
                            <Checkbox toggle />
                        </Grid.Column>
                        <Grid.Column width={4}>
                            <h3>{props.sceneName}</h3>
                        </Grid.Column>
                    </Grid.Row>
                </Grid>
            </List.Header>
        </List.Item>
    );
};

const Trigger = ({ trigger }) => {
    console.log(trigger);
    const { device, operand, value } = trigger;
    const symbol = options.filter((opt) => opt.key === operand)[0].text;
    return (
        <List.Item fluid>
            <Menu compact>
                <Menu.Item as="span">{device}</Menu.Item>
                <Menu.Item as="span">{symbol}</Menu.Item>
                <Menu.Item as="span">{value}</Menu.Item>
            </Menu>
        </List.Item>
    );
};

const Automation = (props) => {
    const [triggerList, setTrigger] = useState([]);
    const [newTrigger, setNewTrigger] = useState({
        device: null,
        operand: null,
        value: null,
    });
    const scenes = ["scene-1", "scene-2", "scene-3"];
    const automationName = "Automation Name";

    const checkNewTrigger = (trigger) => {
        if (!trigger.device || !trigger.operand || !trigger.value) {
            return {
                result: false,
                message: "There are missing fields",
            };
        }
        const result = !triggerList.some(
            (t) => t.device === trigger.device && t.operand === trigger.operand
        );
        return {
            result: result,
            message: result
                ? ""
                : "You have already created a trigger for this device with the same conditions",
        };
    };
    const addTrigger = () => {
        const { result, message } = checkNewTrigger(newTrigger);
        if (result) {
            setTrigger((prevList) => [...prevList, newTrigger]);
        } else {
            alert(message);
        }
    };

    const onInputChange = (val) => {
        setNewTrigger({ ...newTrigger, [val.name]: val.value });
    };

    return (
        <React.Fragment>
            <Header style={{ display: "inline", marginRight: "1rem" }}>
                {automationName}
            </Header>

            <Button
                style={{ display: "inline" }}
                circular
                size="small"
                icon="edit"
            />

            <Segment placeholder className="segment-automations">
                <Grid columns={2} stackable textAlign="center">
                    <Divider vertical></Divider>
                    <Grid.Row verticalAlign="middle">
                        <Grid.Column>
                            <Header>Create Triggers</Header>
                            <List divided relaxed>
                                {triggerList.length > 0 &&
                                    triggerList.map((trigger) => (
                                        <Trigger trigger={trigger} />
                                    ))}
                                <CreateTrigger inputChange={onInputChange} />
                            </List>
                            <Button
                                onClick={addTrigger}
                                circular
                                icon="add"
                                color="blue"
                                size="huge"
                            />
                        </Grid.Column>
                        <Grid.Column>
                            {scenes.length > 0 ? (
                                <React.Fragment>
                                    <Header>Activate Scenes</Header>
                                    <Input
                                        //loading
                                        icon="search"
                                        placeholder="Search..."
                                        fluid
                                    />
                                    <Divider horizontal />
                                    <List divided relaxed>
                                        {scenes.map((scene) => (
                                            <SceneItem sceneName={scene} />
                                        ))}
                                    </List>
                                </React.Fragment>
                            ) : (
                                <React.Fragment>
                                    <Header icon>
                                        <Icon name="world" />
                                    </Header>
                                    <Button primary>Create Scene</Button>
                                </React.Fragment>
                            )}
                        </Grid.Column>
                    </Grid.Row>
                </Grid>
            </Segment>
            <Grid>
                <Grid.Row>
                    <Grid.Column style={{ marginRight: "1rem" }}>
                        <Button color="green">SAVE</Button>
                    </Grid.Column>
                    <Grid.Column>
                        <Button color="red">DELETE</Button>
                    </Grid.Column>
                </Grid.Row>
            </Grid>
        </React.Fragment>
    );
};

class AutomationsPanel extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <List style={{ marginTop: "3rem" }}>
                <Automation />
            </List>
        );
    }
}

const mapStateToProps = (state, _) => ({
    activeRoom: state.active.activeRoom,
    activeTab: state.active.activeTab,
});
const AutomationsPanelContainer = connect(
    mapStateToProps,
    RemoteService
)(AutomationsPanel);
export default AutomationsPanelContainer;