// @ts-nocheck
import * as React from 'react';
import { Props } from './type';
import * as Styled from './index.style'
import { rem as rem750} from '../style/function.style'
import { formatImage } from '../utils/imgResize';

const rem = (px: number) => rem750(px, 848);

const tabs = [
  {
    link: 'https://www.lofter.com/cms/147216/mainstreet1.html',
    icon: 'https://imglf5.lf127.net/bkimg/20220609152833/a2ec463a-1192-472f-a6cf-b82a351e63a5.png',
    activeIcon: 'https://imglf4.lf127.net/bkimg/20220609152913/a4044e09-8c01-4658-b21d-e62ff86d21dd.png',
  },
  {
    link: 'https://www.lofter.com/cms/147109/hotlist.html',
    icon: 'https://imglf4.lf127.net/bkimg/20220609152843/aa74b2c8-96e3-4f85-a7fd-459a387c1482.png',
    activeIcon: 'https://imglf4.lf127.net/bkimg/20220609152953/a084ed1c-15cc-4e0b-8ad8-6ee0b82b995b.png',
  },
  {
    link: 'https://www.lofter.com/cms/147107/IP.html',
    icon: 'https://imglf5.lf127.net/bkimg/20220609152853/e0ac65cc-161a-4bec-be42-60951c54c082.png',
    activeIcon: 'https://imglf6.lf127.net/bkimg/20220609153004/0c23f934-d9b8-491c-b182-c32157836b8a.png',
  },
  {
    link: 'https://www.lofter.com/cms/147110/sale.html',
    icon: 'https://imglf4.lf127.net/bkimg/20220609152901/c18f09a8-efdb-4f3d-8791-a41606041003.png',
    activeIcon: 'https://imglf6.lf127.net/bkimg/20220609153012/25a84be9-d8ca-488e-85fa-cf89ecc44a0b.png',
  },
]

export class BottomTab2022618 extends React.Component<Props, State> {
  public static defaultProps = new Props();
  public state = {
    viewportLeft: 0,
    viewportBottom: 0,
  };

  private switchTab = (url,e) => {
    // e.stopPropagation();
    if(url)
      location.href = url
  }
  
  componentDidMount(): void {
    const { isEdit } = this.props;
    if (isEdit) {
      let vwEl = document.getElementById('viewport');
      let left = vwEl.getBoundingClientRect().left
      let bottom = vwEl.getBoundingClientRect().bottom
      this.setState({
        viewportLeft: left,
        viewportBottom: bottom,
      })
    }
    const rootContainer = isEdit ? document.querySelector('#viewport') : document.body;
    rootContainer.style.paddingBottom = rem(204);
  }

  componentWillUnmount(): void {
    const { isEdit } = this.props;
    const rootContainer = isEdit ? document.querySelector('#viewport') : document.body;
    rootContainer.style.paddingBottom = null;
  }

  public render() {
    let { isEdit } = this.props;
    const { viewportLeft, viewportBottom } = this.state;
    const currentUrl = location.href;
    return <Styled.BottomTabContainer style={{
      left: isEdit ? viewportLeft : 0,
      bottom: isEdit ? (window.innerHeight - viewportBottom) : 0,
      width: isEdit ? 375 : '100%',
    }}>
      {
        <div className="tab-wrapper">
          {
            tabs.map(item => {
              const isActive = currentUrl.indexOf(item.link) >= 0;
              return (
                <div 
                  key={item.link} 
                  className="tab-item"
                  onClick={() => {
                    this.switchTab(item.link)
                  }}
                  style={{ backgroundImage: `url(${formatImage(isActive ? item.activeIcon : item.icon, {
                    width: 220,
                  })})` }}
                ></div>
              )
            })
          }
        </div>
      }

    </Styled.BottomTabContainer>
  }
}