import React from 'react';
import ConfigProvider from 'antd/es/config-provider';
import { ConfigContext as AntdConfigContext } from 'antd/es/config-provider';

import Icons from '../icons';
const {
  CaretLeftIcon,
  CaretRightIcon,
  DoubleLeftIcon,
  DoubleRightIcon,
} = Icons;

export const antPrefix = 'baas';
export const getPrefixCls = (suffixCls, customizePrefixCls) => {
  if (customizePrefixCls) return customizePrefixCls;
  return `${antPrefix}-${suffixCls}`;
};

const paginationIconsProps = (prefixCls, direction) => {
  let prevIcon = (
    <a className={`${prefixCls}-item-link`}>
      <CaretLeftIcon />
    </a>
  );
  let nextIcon = (
    <a className={`${prefixCls}-item-link`}>
      <CaretRightIcon />
    </a>
  );
  let jumpPrevIcon = (
    <a className={`${prefixCls}-item-link`}>
      <div className={`${prefixCls}-item-container`}>
        <DoubleLeftIcon
          fill="currentColor"
          className={`${prefixCls}-item-link-icon`}
        />
        <span className={`${prefixCls}-item-ellipsis`}>•••</span>
      </div>
    </a>
  );
  let jumpNextIcon = (
    <a className={`${prefixCls}-item-link`}>
      <div className={`${prefixCls}-item-container`}>
        <DoubleRightIcon
          fill="currentColor"
          className={`${prefixCls}-item-link-icon`}
        />
        <span className={`${prefixCls}-item-ellipsis`}>•••</span>
      </div>
    </a>
  );

  if (direction === 'rtl') {
    let temp;
    temp = prevIcon;
    prevIcon = nextIcon;
    nextIcon = temp;

    temp = jumpPrevIcon;
    jumpPrevIcon = jumpNextIcon;
    jumpNextIcon = temp;
  }
  return {
    prevIcon,
    nextIcon,
    jumpPrevIcon,
    jumpNextIcon,
  };
};

export const ConfigContext = React.createContext({
  antPrefix,
  getPrefixCls,
  paginationIconsProps,
});

export const ConfigConsumer = ConfigContext.Consumer;

export default props => <ConfigProvider {...props} />;