import React, {ReactNode} from 'react';
import styles from "./index.less";
import {Button, Col, Divider, Row} from "antd";
import Icon, {createFromIconfontCN} from "@ant-design/icons";
import defaultSettings from "../../../../../config/defaultSettings";
import {isImg, isUrl} from "@/utils/utils";
import {history} from "umi";

export type NavBarLink = {
  title: string,
  url: string,
  className?: string,
  icon: ReactNode | string,
  disabled?: boolean,
}

export type BottomNavBarProps = {
  links: NavBarLink[]
}

const IconFont = createFromIconfontCN({
  scriptUrl: defaultSettings.iconfontUrl,
});

const getIcon = (
  icon?: string | React.ReactNode,
  iconPrefixes: string = 'icon-',
): React.ReactNode => {
  if (typeof icon === 'string' && icon !== '') {
    if (isUrl(icon) || isImg(icon)) {
      return (
        <Icon component={() => <img src={icon} alt="icon" className="ant-pro-sider-menu-icon"/>}/>
      );
    }
    if (icon.startsWith(iconPrefixes)) {
      return <IconFont type={icon}/>;
    }
  }
  return icon;
};

const BottomNavBar: React.FC<BottomNavBarProps> = (props) => {
  const {links} = props;
  return (
    <div className={styles.bottomNavbar}>
      <Row className={styles.navList}>
        {links.map((link, index) => {
          const isActive = window.location.href.includes(link.url);
          const id = link.url + link.title;
          const span = Math.floor((24 / links.length));
          return (
            <Col key={id} className={styles.navItem} span={span}>
              <Button
                type={'link'}
                onClick={() => {
                  if (!isActive) {
                    history.push(link.url)
                  }
                }}
                icon={getIcon(link.icon)}
                block={true}
                disabled={link.disabled || false}
                className={(link.disabled ? 'disabled' : '') + (isActive ? ' active' : '')}
              >{link.title}</Button>
              {index < links.length - 1 && (
                <Divider type={'vertical'}/>
              )}
            </Col>
          );
        })}
      </Row>
    </div>
  );
};

export default BottomNavBar;