"use strict";

import React from 'react';
import Slider from 'rc-slider';
import styled from 'styled-components';
import 'rc-slider/assets/index.css';

import FilterSection from './FilterSection';

const Range = Slider.createSliderWithTooltip(Slider.Range);

const contributionsMarks = {
    '0': '0',
    50: {
        style: {
            color: 'gray',
        },
        label: <strong>50</strong>,
    },
};

const ratingMarks = {
    '0': '0',
    5: {
        style: {
            color: 'gray',
        },
        label: <strong>5</strong>,
    },
};

const teamSizeMarks = {
    '2': '2',
    20: {
        style: {
            color: 'gray',
        },
        label: <strong>20</strong>,
    },
};

const LeftDrawerWrapper = styled.div`
    box-sizing: border-box;
    display: block;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    background-color: white;
    color: black;
    border-top: 1px solid #ccc;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    @media (min-width: 768px) {
        display:inline-block;
        float: left;
        width: 230px;
        border-top: 0;
        border-bottom: 0;
    }
`;

const Filter = styled.div`
    & > button {
        border: 1px solid #ccc;
        border-radius: 4px;
        margin: 5px 10px;
        padding: 10px 15px;
        display: inline-block;
        font-size: 16px;
        background: transparent;
        color: gray;

        & > i {
            margin-left: 15px;
        }
    }

    @media (min-width: 768px) {
        display: none;
    }
`;

const FiltersWrapper = styled.div`
    display: block;

    @media (max-width: 768px) {
        display: ${props => props.visible ? 'block' : 'none'};
    }
`;

const CheckboxFilter = styled.div`
    position: relative;
    padding: 20px 0 20px 32px;
    text-align: left;
    label {
        cursor: pointer;
        &:before,
        &:after {
            content: '';
            position: absolute;
        }
        &:before {
            top: 33px;
            left: 0;
            width: 20px;
            height: 20px;
            margin: -15px 0 0;
            border: 1px solid #ccc;
            border-radius: 0;
        }
        &:after {
            top: 31px;
            left: 3px;
            width: 16px;
            height: 16px;
            margin: -10px 0 0;
            opacity: 0;
            background: #195B8B;
            transition: opacity 0.25s ease-in-out;
        }
    }
    input[type="checkbox"] {
        position: absolute;
        top: 0;
        left: -9999px;
        visibility: hidden;

        &:checked + label {
            &:before {
            }
            &:after {
                opacity: 1;
            }
        }
    }
`;

const RangeWrapper = styled.div`
    padding-right: 20px;

    .rc-slider-rail {
        background-color: #ccc;
    }

    .rc-slider-track {
        background-color: #195B8B;
    }

    .rc-slider-handle {
        border-color: #195B8B;
        border-width: 3px;
    }

    .rc-slider-tooltip {
        color: red;
    }

    .rc-slider-mark {
        position: inherit;
        top: 0;
        left: 0;
        padding: 0;
        .rc-slider-mark-text {
            left: 0 !important;
            top: 10px;
            color: gray;
            &:nth-child(2) {
                left: 100% !important;
            }
        }
    }
`;

export default class LeftDrawer extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            isOpen: false,
            filters: this.props.filters
        };

        this.handleFiltering = this.props.handleFiltering;

        this.toggleDropdown = this.toggleDropdown.bind(this);
        this.handleRangeFilter = this.handleRangeFilter.bind(this);
        this.handleCheckboxFilter = this.handleCheckboxFilter.bind(this);
    }

    toggleDropdown() {
        this.setState({isOpen: !this.state.isOpen});
    }

    filterFrameworks(newFilters) {
        this.setState({filters: newFilters});
        this.handleFiltering(this.state.filters);
    }

    handleRangeFilter(event, name) {
        const newFilters = this.state.filters;
        newFilters[name].from = event[0];
        newFilters[name].to = event[1];
        this.filterFrameworks(newFilters);
    }

    handleCheckboxFilter(event, name) {
        const newFilters = this.state.filters;
        newFilters[name] = event.target.checked;
        this.filterFrameworks(newFilters);
    }

    handleScopeLevelFilter(event, name) {
        const newFilters = this.state.filters;

        if (event.target.checked) {
            if (this.state.filters.scopeLevel.indexOf(name) === -1)
                newFilters.scopeLevel.push(name);
        } else {
            newFilters.scopeLevel = newFilters.scopeLevel.filter(item => item !== name);
        }

        this.filterFrameworks(newFilters);
    }

    render() {
        return (
            <LeftDrawerWrapper>
                <Filter>
                    <button onClick={this.toggleDropdown}>
                        Filter <i className="fa fa-sliders"/>
                    </button>
                </Filter>
                <FiltersWrapper visible={this.state.isOpen}>
                    <FilterSection sectionName="Scope Level">
                        <CheckboxFilter>
                            <input type="checkbox" id="checkbox-enterprise"
                                   onChange={event => this.handleScopeLevelFilter(event, 'Enterprise')}/>
                            <label htmlFor="checkbox-enterprise"> Enterprise</label>
                        </CheckboxFilter>
                        <CheckboxFilter>
                            <input type="checkbox" id="checkbox-organization"
                                   onChange={event => this.handleScopeLevelFilter(event, 'IT Organization')}/>
                            <label htmlFor="checkbox-organization">IT Organization</label>
                        </CheckboxFilter>
                        <CheckboxFilter>
                            <input type="checkbox" id="checkbox-portfolio"
                                   onChange={event => this.handleScopeLevelFilter(event, 'Portfolio')}/>
                            <label htmlFor="checkbox-portfolio">Portfolio</label>
                        </CheckboxFilter>
                        <CheckboxFilter>
                            <input type="checkbox" id="checkbox-program"
                                   onChange={event => this.handleScopeLevelFilter(event, 'Program')}/>
                            <label htmlFor="checkbox-program">Program</label>
                        </CheckboxFilter>
                        <CheckboxFilter>
                            <input type="checkbox" id="checkbox-team"
                                   onChange={event => this.handleScopeLevelFilter(event, 'Team')}/>
                            <label htmlFor="checkbox-team">Team</label>
                        </CheckboxFilter>
                    </FilterSection>
                    <FilterSection sectionName="Other">
                        <CheckboxFilter>
                            <input type="checkbox" id="checkbox-documentation"
                                   onChange={event => this.handleCheckboxFilter(event, 'documentation')}/>
                            <label htmlFor="checkbox-documentation">Documentation</label>
                        </CheckboxFilter>
                        <CheckboxFilter>
                            <input type="checkbox" id="checkbox-community"
                                   onChange={event => this.handleCheckboxFilter(event, 'documentation')}/>
                            <label htmlFor="checkbox-community">Community</label>
                        </CheckboxFilter>
                    </FilterSection>
                    <FilterSection sectionName="Contributions">
                        <RangeWrapper>
                            <Range range={true}
                                   min={0}
                                   max={50}
                                   marks={contributionsMarks}
                                   value={[this.state.filters.contributions.from, this.state.filters.contributions.to]}
                                   onChange={event => this.handleRangeFilter(event, 'contributions')}/>
                        </RangeWrapper>
                    </FilterSection>
                    <FilterSection sectionName="Rating">
                        <RangeWrapper>
                            <Range range={true}
                                   min={0}
                                   max={5}
                                   marks={ratingMarks}
                                   value={[this.state.filters.rating.from, this.state.filters.rating.to]}
                                   onChange={event => this.handleRangeFilter(event, 'rating')}/>
                        </RangeWrapper>
                    </FilterSection>
                    <FilterSection sectionName="Team Size">
                        <RangeWrapper>
                            <Range range={true}
                                   min={2}
                                   max={20}
                                   marks={teamSizeMarks}
                                   value={[this.state.filters.teamSize.from, this.state.filters.teamSize.to]}
                                   onChange={event => this.handleRangeFilter(event, 'teamSize')}/>
                        </RangeWrapper>
                    </FilterSection>
                </FiltersWrapper>
            </LeftDrawerWrapper>
        );
    }

}