import * as React from 'react';
import { Dispatch, Action } from 'redux';
import { createSelector, ParametricSelector } from 'reselect';
import { setUIState } from './actions';

//////////////////////////////////////////////////
// Id interfaces and functions

/**
 * A string or a function accepting the props as an argument and returning a string
 */
export type IdFunction<TProps> = (props: TProps) => string;
export type Id<TProps> = string | IdFunction<TProps>;

/**
 * A type guard guaranteeing id is a string;
 */
export const idIsString = <TProps>(id: Id<TProps>): id is string => typeof id === 'string';

/**
 * A type guard guaranteeing id is a function that accepts props and returns a string
 */
export const idIsFunction = <TProps>(id: Id<TProps>): id is IdFunction<TProps> => typeof id === 'function';

/**
 * Returns a string or undefined from the union type of (string | function that returns string)
 */
export const getStringFromId = <TProps>(id: Id<TProps>, props: TProps): string | undefined => {
  if (idIsString(id)) { return id; }
  if (idIsFunction(id)) { return id(props); }
  return undefined;
};

//////////////////////////////////////////////////
// Interfaces

/**
 * The default shape of a store containing the uiState reducer
 */
export interface DefaultStoreState {
  // This is slightly gross and involves repetition of the value in DEFAULT_BRANCH_NAME, but
  // TypeScript doesn't currently allow computed property names in interfaces - [DEFAULT_BRANCH_NAME]: UIStateBranch;
  ui: UIStateBranch;
}

/**
 * The branch of the Redux store governed by reduxUIState's reducer
 */
export type UIStateBranch = Record<string, {}>;

/**
 * The state props passed into a component wrapped by addReduxUIState
 */
export interface StateProps<TUIState> {
  uiState: TUIState;
}

/**
 * The dispatch props passed into a component wrapped by addReduxUIState
 */
export interface DispatchProps<TUIState> {
  setUIState: (state: Partial<TUIState>) => void;
}

/**
 * All the props props passed into a component wrapped by addReduxUIState
 */
export type Props<TUIState> = StateProps<TUIState> & DispatchProps<TUIState>;

/**
 * The component passed into addReduxUIState
 */
export type AbstractWrappedComponent<TProps> = React.StatelessComponent<TProps> | React.ComponentClass<TProps>;

/**
 * A component being passed into addReduxUIState that accepts the default props
 */
export type WrappedComponentWithDefaultProps<TUIState, TProps> = AbstractWrappedComponent<TProps & Props<TUIState>>;

/**
 * A component being passed into addReduxUIState that accepts mapped props
 */
export type WrappedComponentWithMappedProps<TUIState, TProps, TTransformedProps> = AbstractWrappedComponent<TProps & TTransformedProps>; // tslint:disable-line:max-line-length

/**
 * A Selector that accepts the full application state and returns the Redux UI State branch
 */
// export type UIStateBranchSelector<TAppState = DefaultStoreState> = (appState: TAppState) => UIStateBranch;
// This looks weird, but the standard type definition (commented out above) causes a Reselect import error
export interface UIStateBranchSelector<TAppState> extends ParametricSelector<TAppState, {}, UIStateBranch> {
  (appState: TAppState): UIStateBranch;
}

/**
 * The props representing the key of the UI state data in the store
 */
export interface UIStateIdProps<TProps> {
  uiStateId: Id<TProps>;
}

/**
 * The function used to make changes to the state
 */
export type SetUIState<TUIState> = (state: Partial<TUIState>) => void;

//////////////////////////////////////////////////
// Constants

export const DEFAULT_BRANCH_NAME = 'ui';
export const UNDEFINED_KEY = 'REDUX_UI_STATE_UNDEFINED_KEY';

//////////////////////////////////////////////////
// Selectors

export const stateSelector = <TAppState = DefaultStoreState>(state: TAppState) => state;
export const propsSelector = <TProps>(_: any, props: TProps) => props; // tslint:disable-line:no-any

/**
 * Selects the ui state branch from the default location in the Redux store
 */
export const defaultUIStateBranchSelector: UIStateBranchSelector<DefaultStoreState> = (
  state: DefaultStoreState
): UIStateBranch => state[DEFAULT_BRANCH_NAME];

/**
 * The props containing the selector for the uiState branch.
 */
export interface UIStateBranchSelectorSelectorProps<TAppState> {
  uiStateBranchSelector?: UIStateBranchSelector<TAppState>;
}

/**
 * Selects the uiState branch selector, returning defaultUIStateBranchSelector if a custom is not found in the props
 */
export const uiStateBranchSelectorSelector = <TAppState>(
  _: any, // tslint:disable-line:no-any
  props: UIStateBranchSelectorSelectorProps<TAppState>
) => {
  const uiStateBranchSelector = props && props.uiStateBranchSelector;

  if (!uiStateBranchSelector) {
    throw new Error(
      'redux-ui-state Couldn\'t find uiStateBranchSelector in props - this is most likely because ' +
      'createConnectUIState was called without an argument');
  }

  return uiStateBranchSelector;
};

export const uiStateBranchSelector = createSelector(
  uiStateBranchSelectorSelector,
  stateSelector,
  (selector, state) => {
    const branch = selector(state);
    if (!branch) {
      throw new Error(
        'redux-ui-state Could not select UI state branch from the store - this is either because the reducer has not' +
        'been composed properly or the selector is looking in the wrong location.'
      );
    }
    return branch;
  }
);

export const idSelector = <TProps>(
  _: any, // tslint:disable-line:no-any
  props: TProps & Partial<UIStateIdProps<TProps>>
) => { 
  if (!props.uiStateId) {
    throw new Error(
      'Couldn\'t find uiStateId prop for idSelector in Redux UI State - this usually occurs because the id passed ' +
      'into connectUIState is undefined, or the uiStateId prop being passed into a component is undefined.'
    );
  }
  return getStringFromId(props.uiStateId, props);
};

export const UI_STATE_SELECTOR_WARNING_MESSAGE = 'redux-ui-state state key is undefined';
export const createUIStateSelectorWarningMessage = (id?: string) => (
  `redux-ui-state uiStateSelector found undefined state for key: ${id}.\n` +
  `This is most often due to the value not being initialized in createReducer.`
);

export const uiStateSelector = createSelector(
  uiStateBranchSelector,
  idSelector,
  (uiStateBranch, id) => {
    if (!id) {
      console.warn(UI_STATE_SELECTOR_WARNING_MESSAGE);
    }
    const uiState = uiStateBranch[id || UNDEFINED_KEY];
    if (!uiState) {
      console.warn(createUIStateSelectorWarningMessage(id));
    }
    // Since the branch in the store does not contain the types for each of the sub-branches
    // uiState is cast to any. This is recast to the UIState state generic in createUIState
    // connectUIState
    // tslint:disable-next-line:no-any
    return uiState as any;
  }
);

export const SET_UI_STATE_SELECTOR_WARNING_MESSAGE = 
  'redux-ui-state - state key is undefined in setUIStateSelector\n' + 
  'This is due to an id not being passed via the props';
export const SET_UI_STATE_WARNING_MESSAGE = 
  'redux-ui-state - state key is undefined in setUIStateSelector\n' + 
  'This is due to an id not being passed via the props';

/**
 * Selects the setUIState function.
 * This differs from normal selectors in that it is a dispatch selector, meaning that it expects dispatch as the first
 * function and returns a function capable of dispatching through the Redux store.
 * @param dispatch The dispatch function of the Redux store
 * @param props The component's props
 */
export const setUIStateSelector = <TUIState, TProps extends UIStateIdProps<TProps>>(
  dispatch: Dispatch<Action>,
  props: TProps
) => {
  const id = idSelector<TProps>(undefined, props);
  if (!id) {
    console.warn(SET_UI_STATE_SELECTOR_WARNING_MESSAGE);
    return (state: Partial<TUIState>) => {
      console.warn(SET_UI_STATE_WARNING_MESSAGE);
    };
  }
  return (state: Partial<TUIState>) => {
    dispatch(setUIState<Partial<TUIState>>({ id, state }));
  };
};