import React, { useEffect, useState } from 'react'
import { Layout, Menu, Breadcrumb, Image } from 'antd'
import { Container } from '../styled/layout'
import { useRouter } from 'next/router'
import _ from 'lodash'
import menuConfig from '../utils/menu'

const { SubMenu } = Menu
const { Header, Content, Sider } = Layout

const getLocationKey = () => {
  const result = {
    topMenu: '1',
    slideMenu: '0'
  }

  if (typeof window !== 'undefined') {
    const locationHref = window.location.href

    let locationHrefArr = locationHref.split('?')
    if (locationHrefArr.length > 0) {
      locationHrefArr = locationHrefArr[0].split('//')

      if (locationHrefArr.length > 1) {
        let locationStr = locationHrefArr[1]
        const locationIndex = locationStr.indexOf('/')
        locationStr = locationStr.substring(locationIndex)

        console.log('locationStr', locationStr)

        _.each(menuConfig, (item:any, index:any) => {
          const { key, url, subMenus } = item

          if (subMenus) {
            _.each(subMenus, (subItem:any, subIndex:any) => {
              const { key: subKey, url: subUrl } = subItem

              if (locationStr === subUrl.split('?')[0]) {
                const subKeyArr = subKey.split('_')
                const subKeyArrLen = subKeyArr.length

                if (subKeyArrLen > 0) result.topMenu = subKeyArr[0]
                if (subKeyArrLen > 1) result.slideMenu = subKeyArr[1]

                return false
              }
            })
          } else if(url){
            if (locationStr === url.split('?')[0]) {
              result.topMenu = key
              return false
            }
          }
        })
      }
    }
  }
  console.log('result', result)
  return result
}

const routerPush = (router: any, url: string) => { 
  console.log('routerPush', url)

  if (router && url) { 
    router.push(url)
  }
}

const LayoutComponent = ({ children }) => {
  const router = useRouter()
  const [topMenuKey, setTopMenuKey] = useState('1')
  const [sliderMenuKey, setSliderMenuKey] = useState('1')

  console.log('topMenuKey: ' + topMenuKey, ', sliderMenuKey: ' + sliderMenuKey)

  useEffect(() => {
    const { topMenu, slideMenu } = getLocationKey()
    setTopMenuKey(topMenu)
    setSliderMenuKey(slideMenu)
  }, [])

  return (
    <Layout>
      <Container>
        <Header className="header">
          <div className="logo">
            <Image width={100} src="../images/zhizuotu_1.png" preview={false} />
          </div>
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']} selectedKeys={[topMenuKey]}>
            {_.map(menuConfig, (item:any, index:any) => {
              const { key, text, url, subMenus } = item
              if (key) {
                return (
                  <Menu.Item
                    key={key}
                    onClick={() => {
                      routerPush(router, url)
                      setTopMenuKey(key)

                      if (subMenus) {
                        setSliderMenuKey('1')
                      } else {
                        setSliderMenuKey('0')
                      }
                    }}
                  >
                    {text}
                  </Menu.Item>
                )
              }
            })}
          </Menu>
        </Header>
        <Layout>
          <Sider width={200} className="site-layout-background">
            <Menu
              mode="inline"
              defaultSelectedKeys={['slider_1_0']}
              defaultOpenKeys={['slider_1']}
              selectedKeys={['slider_' + topMenuKey + '_' + sliderMenuKey]}
              openKeys={['slider_' + topMenuKey]}
              style={{ height: '100%', borderRight: 0 }}
            >
              {_.map(menuConfig, (item:any, index:any) => {
                const { key, text, url, icon, subMenus } = item

                if (subMenus) {
                  return (
                    <SubMenu
                      key={'slider_' + key}
                      icon={icon}
                      title={text}
                      onTitleClick={() => {
                        setTopMenuKey(key)
                        setSliderMenuKey('1')
                      }}
                    >
                      {_.map(subMenus, (subItem:any, subIndex:any) => {
                        const { key: subKey, text: subText, url: subUrl } = subItem
                        return (
                          <Menu.Item
                            key={'slider_' + subKey}
                            onClick={() => {
                              routerPush(router, subUrl)

                              const subKeyArr = subKey.split('_')
                              const subKeyArrLen = subKeyArr.length

                              console.log(subKeyArr, subKeyArrLen)

                              if (subKeyArrLen >= 1) setTopMenuKey(subKeyArr[0])

                              if (subKeyArrLen >= 2) setSliderMenuKey(subKeyArr[1])
                            }}
                          >
                            {subText}
                          </Menu.Item>
                        )
                      })}
                    </SubMenu>
                  )
                } else {
                  if (key) {
                    return (
                      <Menu.Item
                        key={'slider_' + key + '_0'}
                        icon={icon}
                        onClick={() => {
                          routerPush(router, url)
                          setTopMenuKey(key)
                          setSliderMenuKey('0')
                        }}
                      >
                        {text}
                      </Menu.Item>
                    )
                  }
                }
              })}
            </Menu>
          </Sider>
          <Layout style={{ padding: '0 24px 24px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              {_.map(menuConfig, (item:any, index:any) => {
                const { key, text, subMenus } = item

                if (key && key === topMenuKey) {
                  if (subMenus) {
                    const subContent = []
                    _.each(subMenus, (subItem:any, subIndex:any) => {
                      const { key: subKey, text: subText } = subItem
                      if (subKey === key + '_' + sliderMenuKey) {
                        subContent.push(<Breadcrumb.Item key={'breadcrumb' + subIndex}>{text}</Breadcrumb.Item>)
                        subContent.push(<Breadcrumb.Item key={'breadcrumb' + subIndex}>{subText}</Breadcrumb.Item>)
                        return false
                      }
                    })
                    return subContent
                  } else {
                    return <Breadcrumb.Item key={'breadcrumb' + index}>{text}</Breadcrumb.Item>
                  }
                }
              })}
            </Breadcrumb>
            <Content
              className="site-layout-background"
              style={{
                padding: 24,
                margin: 0,
                minHeight: 280
              }}
            >
              {children}
            </Content>
          </Layout>
        </Layout>
      </Container>
    </Layout>
  )
}

export default LayoutComponent