import React, { cloneElement } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
import {
  addOrientationChangeListener,
  removeOrientationChangeListener,
  getOrientationAsync,
  Orientation,
} from 'expo-screen-orientation';
import omit from 'lodash.omit';

import withDimensions from '../dimensions/withDimensions';
import { orientationChange as orientationChangeAction } from '../reducers/app/layoutReducer/actions';
import { selectOrientation } from '../reducers/app/layoutReducer/selectors';

class ConnectedOrientationProvider extends React.Component {
  constructor(props) {
    super(props);
    this.onOrientationChange = this.onOrientationChange.bind(this);
  }

  // eslint-disable-next-line camelcase
  UNSAFE_componentWillMount() {
    this.subscription = addOrientationChangeListener(this.onOrientationChange);
  }

  async componentDidMount() {
    await this.detectOrientation();
  }

  componentWillUnmount() {
    removeOrientationChangeListener(this.subscription);
  }

  onOrientationChange({ orientationInfo: { orientation } }) {
    this.setOrientation(orientation);
  }

  setOrientation(orientation) {
    const { orientationChange } = this.props;
    orientationChange(this.fixOrientation(orientation));
  }

  fixOrientation(orientation) {
    let newOrientation = orientation;
    /** fix for android having too much orientations */
    newOrientation = newOrientation.split('_')[0]; // eslint-disable-line prefer-destructuring
    /** fix for safari (See https://github.com/expo/expo/issues/6949) */
    if (newOrientation === Orientation.UNKNOWN) {
      const { dimensions: { width, height } } = this.props;
      newOrientation = width > height ? Orientation.LANDSCAPE : Orientation.PORTRAIT;
    }
    return newOrientation;
  }

  async detectOrientation() {
    const { orientation } = await getOrientationAsync();
    this.setOrientation(orientation);
  }

  render() {
    const { children, ...rest } = omit(this.props, ['orientationChange', 'orientation', 'dimensions']);
    return cloneElement(children, rest);
  }
}

ConnectedOrientationProvider.propTypes = {
  orientationChange: PropTypes.func.isRequired,
  dimensions: PropTypes.shape({
    width: PropTypes.number,
    height: PropTypes.number,
  }).isRequired,
};

const mapStateToProps = createStructuredSelector({
  orientation: selectOrientation,
});

const mapDispatchToProps = (dispatch) => ({
  orientationChange: (orientation) => dispatch(orientationChangeAction(orientation)),
});


export default compose(
  withDimensions,
  connect(mapStateToProps, mapDispatchToProps),
)(ConnectedOrientationProvider);

const orientationId = await getOrientationAsync();