import React from 'react'
import Layout from '../Layout'
import ProjectList from './ProjectList'
import ProjectModal from './ProjectModal'
import Button from 'material-ui/Button'
import Haikunator from 'haikunator'
import withData from './withData'
import { compose, branch } from 'recompose'
import { mapPropsStream, createEventHandler } from '../../rx'
import { LoadingOverlay } from '../../lib/withAsync'
import { startWith, combineLatest, map } from 'rxjs/operators'

const haikunator = new Haikunator()

export const findIndex = (arr, id) => {
  let index = 0
  while (index < arr.length) {
    if (arr[index].id === id) {
      break
    }
    index++
  }
  return index >= arr.length ? -1 : index
}

class Projects extends React.Component {
  handleClick = (evt, id) => {
    this.props.history.replace('/projects/' + id)
  }

  createProject = () => {
    this.props.createProject.mutate({
      name: haikunator.haikunate(),
      userId: this.props.auth.user.id
    })
  }

  render () {
    const { createProject } = this.props
    return (
      <Layout {...this.props} loading={createProject.loading}>
        <ProjectModal
          {...this.props}
        />
        <div style={{
          width: '660px',
          margin: '2em auto'
        }}>
          <div style={{
            margin: '2em 0'
          }}>
            <ProjectList
              allProjects={this.props.data.allProjects}
              handleClick={this.props.handleClick}
              onMouseEnter={this.props.onMouseEnter}
              onMouseLeave={this.props.onMouseLeave}
              handleDelete={this.props.handleDelete}
              handleClose={this.props.handleClose}
            />
          </div>
          <Button
            variant='raised'
            color='primary'
            onClick={this.createProject}
          >
            New Project
          </Button>
        </div>
      </Layout>
    )
  }
}

Projects.defaultProps = {
  data: {
    allProjects: []
  },
  activeProject: undefined,
  handleClick: () => {},
  handleClose: () => {}
}

const withWrapper = compose(
  withData,
  branch(
    props => !props.data || props.data.loading,
    Component => props => <LoadingOverlay>
      <Component {...props} />
    </LoadingOverlay>
  ),
  mapPropsStream(props$ => {
    const { handler: handleProject, stream: projectStream$ } = createEventHandler()

    const projectStream = projectStream$.pipe(startWith({
      activeProject: undefined,
      open: false
    }))

    const handleClose = () => handleProject({
      activeProject: undefined,
      open: false
    })

    const handleClick = activeProject => handleProject({
      activeProject,
      open: true
    })

    const onMouseEnter = activeProject => {
      handleProject({
        activeProject,
        open: false
      })
    }

    const onMouseLeave = activeProject => {}

    const handleDelete = ({ deleteProject }) => activeProject =>
      Promise.resolve(handleClose()).then(
        deleteProject({ id: activeProject })
      )

    return props$.pipe(
      map(props => ({
        ...props,
        handleClose,
        handleClick,
        handleDelete: handleDelete({
          deleteProject: props.deleteProject
        }),
        onMouseEnter,
        onMouseLeave
      })),
      combineLatest(
        projectStream,
        (props, state) => ({
          ...props,
          ...state
        })
      )
    )
  })
)
export default withWrapper(Projects)