import { Select, Tabs } from "antd"
import React, { useRef } from "react"
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
import { useAjax } from "@/Hook/useAjax"
import style from './index.less'
import TeamMembers from "./teamMembers"
import { useSize } from "ahooks"
import teamStore from '../../store/teamStore'
import { toJS } from "mobx"
import { getAdAccountAllOfMember } from "@/API/global"

interface props {
    children?: React.ReactNode;
    heightDiffer?: number
    tabBarExtraContent?: any
    isShowSelect?: boolean
}

/**
 * 组员选择
 * @param param0 
 * @returns 
 */
const Team: React.FC<props> = ({ children, heightDiffer, tabBarExtraContent, isShowSelect = true }) => {

    /************************/
    const corpIds = toJS(teamStore.data.corpIds)
    const active_corpIds = toJS(teamStore.data.active_corpIds)
    const userId = toJS(teamStore.data.userId)
    const activeKey = toJS(teamStore.data.activeKey)
    const showLeft = toJS(teamStore.data.showLeft)
    const loading = toJS(teamStore.data.loading)
    const ref = useRef(null)
    const size = useSize(ref)

    const allOfMember = useAjax(() => getAdAccountAllOfMember())
    /************************/

    return <div style={{ width: '100%' }}>
        <div style={{ marginTop: 10, boxSizing: 'border-box', width: '100%', display: 'flex', gap: 10 }}>
            <Tabs
                tabBarStyle={{ marginBottom: 1 }}
                activeKey={activeKey}
                style={{ width: 150 }}
                type="card"
                onChange={(activeKey) => {
                    if (activeKey !== 'contract') {
                        teamStore.setActiveKey(activeKey)
                        if (activeKey === '1') {
                            teamStore.setUserId(Number(sessionStorage.getItem('userId')))
                        }
                    } else {
                        teamStore.setShowLeft(!showLeft)
                    }
                }}
                items={[
                    { label: '我的', key: '1' },
                    { label: '组员', key: '2' },
                    { label: showLeft ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />, key: 'contract' },
                ]}
            />
            <div style={{ display: 'flex', justifyContent: 'space-between', flex: 1, alignItems: 'center' }}>
                <div>
                    {isShowSelect && <Select
                        loading={loading}
                        value={active_corpIds}
                        onChange={(e, option) => {
                            teamStore.setActiveCorpIds(e)
                            teamStore.setActiveCorpIdsObj(option)
                        }}
                        showSearch
                        style={{ width: 140 }}
                        placeholder="选择企业"
                        filterOption={(input, option) =>
                            ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
                        }
                        options={corpIds}
                    />}
                </div>
                <div>{tabBarExtraContent}</div>
            </div>
        </div>
        <div className={style.manage} style={{ gap: (!showLeft && activeKey === '2') ? 4 : 0 }}>
            <div ref={ref}>{!showLeft && activeKey === '2' && <TeamMembers heightDiffer={heightDiffer} allOfMember={allOfMember} onChange={(putUserId) => teamStore.setUserId(putUserId)} value={userId} />}</div>
            <div className={style.manage__left} style={(showLeft || activeKey === '1') ? { width: '100%' } : { width: `calc(100% - ${size.width || 132}px)` }}>
                {children}
            </div>
        </div>
    </div>
}

export default React.memo(Team)