// @flow

import React from "react";
import type { Repository } from "@scm-manager/ui-types";
import { connect } from "react-redux";
import { fetchBranches, getBranch, getBranches } from "../modules/branches";
import DropDown from "../components/DropDown";

type Props = {
  repository: Repository,
  fetchBranches: Repository => void,
  callback: Branch => void, //TODO use correct branch type
  branches: Branch[], //TODO use correct branch type
  selectedBranchName: string
};

type State = {
  selectedBranchName: string
};

class BranchChooser extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      selectedBranchName: props.selectedBranchName
    };
  }

  componentDidMount() {
    const { repository, fetchBranches } = this.props;
    fetchBranches(repository);
  }

  render() {
    const { branches } = this.props;
    return (
      <DropDown
        options={branches.map(b => b.name)}
        preselectedOption={this.state.selectedBranchName}
        optionSelected={branch => this.branchChanged(branch)}
      />
    );
  }

  branchChanged = (branchName: string) => {
    const { callback } = this.props;
    this.setState({ ...this.state, selectedBranchName: branchName });
    const branch = this.props.branches.find(b => b.name === branchName);
    callback(branch);
  };
}

const mapStateToProps = (state: State, ownProps: Props) => {
  return {
    branches: getBranches(state, ownProps.repository)
  };
};

const mapDispatchToProps = (dispatch: any) => {
  return {
    fetchBranches: (repository: Repository) => {
      dispatch(fetchBranches(repository));
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(BranchChooser);