import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import styled from "styled-components";
import Search from "react-native-search-box";
import Accordion from "react-native-collapsible/Accordion";

import IconButton from "../../_elements/IconButton";
import SingleJob from "../../_elements/SingleJob";
import AccordionHeader from "../components/AccordionHeader";

const JOBS = [
  {
    id: 1,
    plannedDate: "21/04/2018" /* here timestimp will be shown */,
    description: "Inspection-D20",
    plannedDuration: "80min",
    urgent: true,
    state: "new",
    priority: ""
  },
  {
    id: 2,
    plannedDate: "09/11/2017" /* here timestimp will be shown */,
    description: "Inspection-C24",
    plannedDuration: "120min",
    urgent: true,
    state: "finished",
    priority: "PrioA"
  },
  {
    id: 3,
    plannedDate: "09/03/2018" /* here timestimp will be shown */,
    description: "Inspection-C26",
    plannedDuration: "160min",
    urgent: false,
    state: "unfinished",
    priority: "PrioB"
  },
  {
    id: 4,
    plannedDate: "09/01/2018" /* here timestimp will be shown */,
    description: "Inspection-C28",
    plannedDuration: "140min",
    urgent: false,
    state: "unfinished",
    priority: "PrioC"
  },
  {
    id: 5,
    plannedDate: "09/11/2017" /* here timestimp will be shown */,
    description: "Inspection-C241",
    plannedDuration: "120min",
    urgent: true,
    state: "finished",
    priority: "PrioA"
  },
  {
    id: 6,
    plannedDate: "09/11/2017" /* here timestimp will be shown */,
    description: "Inspection-C242",
    plannedDuration: "120min",
    urgent: true,
    state: "finished",
    priority: "PrioA"
  }
];

function groupJobsByPriority(originalJobs) {
  // find all unique priorities
  const uniquePrioritiesMap = {};
  originalJobs.forEach(job => {
    if (!uniquePrioritiesMap[job.priority]) {
      uniquePrioritiesMap[job.priority] = true;
    }
  });
  const uniquePriorities = Object.keys(uniquePrioritiesMap).filter(
    p => p !== "undefined"
  );

  // generate grouped array
  const groupedByPrioJobs = uniquePriorities.map(priority => {
    return {
      priority,
      jobs: originalJobs.filter(job => job.priority === priority)
    };
  });
  return groupedByPrioJobs;
}

const Container = styled.View`
  flex: 1;
  background: white;
`;

const Row = styled.View`
  flex: 1;
`;

const ContainerList = styled.View`
  flex: 6;
`;

const ButtonContainer = styled.View`
  flex-direction: row;
  flex: 1;
  align-items: center;
  justify-content: center;
`;

const WrapperElement = styled.View`
  flex: 1;
`;

export default class JobListScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      jobSections: []
    };
  }

  componentDidMount() {
    this.setState({ jobSections: groupJobsByPriority(JOBS) });
  }

  renderHeader(content, index, isActive) {
    return (
      <AccordionHeader
        title={content.priority === "" ? "Keine" : content.priority}
        name=""
        source={
          isActive
            ? require("../resources/arrowdown.png")
            : require("../resources/inversedarrow.png")
        }
      />
    );
  }

  renderContent(section) {
    return section.jobs.map((job, i) => (
      <SingleJob
        key={i}
        source={require("../resources/urgent.png")}
        title={job.description}
        date={job.plannedDate}
        duration={job.plannedDuration}
        recording
      />
    ));
  }

  render() {
    return (
      <Container>
        <Row>
          <Search
            ref="search_box"
            backgroundColor="white"
            titleCancelColor="black"
            inputHeight={40}
          />
        </Row>
        <Row>
          <ButtonContainer>
            <IconButton
              text="past due"
              source={require("../resources/pastdue.png")}
              orientation="row"
            />
            <IconButton
              text="open"
              source={require("../resources/open.png")}
              orientation="row"
            />
            <IconButton
              text="urgent"
              source={require("../resources/urgent.png")}
              orientation="row"
            />
          </ButtonContainer>
        </Row>
        <ContainerList>
          <Accordion
            sections={this.state.jobSections}
            renderHeader={this.renderHeader}
            renderContent={this.renderContent}
            touchableComponent={TouchableOpacity}
          />
        </ContainerList>
      </Container>
    );
  }
}