import React, { useMemo, useCallback, useState, useEffect, useRef, useLayoutEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import * as Shared from 'placeholder-shared'
import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
import * as immer from 'immer';
import * as YAML from 'yaml';
import MonacoEditor from 'react-monaco-editor'
import { MonacoDiffEditor } from 'react-monaco-editor';

import * as Common from './common'
import * as Antd from 'antd';
import { Menu, Dropdown, Button, List, Anchor, Modal, message, Alert, Space, Input } from 'antd';
import './VersionControl.scss';
import {useChangeUserConfig} from './Settings';

import {
    UsergroupAddOutlined,
    DiffOutlined,
    FileAddOutlined,
    FileSearchOutlined,
    ForkOutlined,
    SaveOutlined,
    DownOutlined,
    UserOutlined,
    WarningOutlined,
    SettingOutlined,
    BranchesOutlined,
    CodeOutlined,
} from '@ant-design/icons'

import { } from '@ant-design/icons';
import { VersionControlActions } from 'placeholder-shared';

const { Link } = Anchor;
const { TextArea } = Input;
const { 
    stageGitCheckoutWithRefThunk,
    getYamlContent,
    VersionControlStatus,
    getThunk,
    ThunkKey,
    hideModal,
    readme,
} = Shared.VersionControlActions;

export interface VersionControlMenuState {
    navPeep: any;
    menuStructure: any;
}

export enum MenuStructureType {
    Menu = 'Menu',
    MenuItem = 'MenuItem',
    ItemGroup = 'ItemGroup',
    MenuDivider = 'MenuDivider',
    SubMenu = 'SubMenu',
}

const settingsMenuItemGroup0 = {
    key: "gitSettings", type: MenuStructureType.ItemGroup, title: "gitSettings", menuItems: [
        { key: "createGitCredentials", thunkKey: ThunkKey.createGitCredentials, disabled: false, danger: false, innerHtml: "create git credentials" }
    ]
};

const settingsMenuItemGroup1 = {
    key: "gitSettings", type: MenuStructureType.ItemGroup, title: "gitSettings", menuItems: [
        { key: "setGitCredentials", thunkKey: ThunkKey.setGitCredentials, disabled: false, danger: false, innerHtml: "set git credentials" },
        { key: "setRepoName", thunkKey: ThunkKey.setGitRepo, disabled: false, danger: false, innerHtml: "set repo name" }
    ]
    
}

export const MENU0: VersionControlMenuState = {
    navPeep: <Antd.Typography.Text type="danger"><WarningOutlined /> git not configured</Antd.Typography.Text>,
    menuStructure: [
        {key: "goToGitSettings", 
        type: MenuStructureType.MenuItem, 
        thunkKey: ThunkKey.goGitSettings, 
        disabled: false, danger: false, 
        innerHtml: <Antd.Typography.Text><SettingOutlined />Go to Settings</Antd.Typography.Text> }
    ]
}

export const MENU0A: VersionControlMenuState = {
    navPeep: "<no git credentials>",
    menuStructure: [
        settingsMenuItemGroup0,
        {
            key: "gitActions", type: MenuStructureType.ItemGroup, title: "gitActions", menuItems: [
                { key: "createRepoPrivate", thunkKey: null, disabled: true, danger: false, innerHtml: "create private repo" }
            ]
        }
    ]
}

export const MENU0B: VersionControlMenuState = {
    navPeep: "<no repo created>",
    menuStructure: [
        settingsMenuItemGroup0,
        {
            key: "gitActions", type: MenuStructureType.ItemGroup, title: "gitActions", menuItems: [
                { key: "createRepoPrivate", thunkKey: ThunkKey.createGitRepo, disabled: false, danger: false, innerHtml: "create private repo" }
            ]
        }
    ]
}

export const MENU1: VersionControlMenuState = {
    navPeep: <Antd.Typography.Text><ForkOutlined /> On Branch Master</Antd.Typography.Text>,
    menuStructure: [
        {
            key: "changeBranch", type: MenuStructureType.SubMenu, title: "Change Branch", icon: <BranchesOutlined />, disabled:true, menuStructure: []
        },
        {
            key: "divider1", type: MenuStructureType.MenuDivider
        },
        { key: "gitCommit", type: MenuStructureType.MenuItem, thunkKey: ThunkKey.submitGitCommitWithRef, disabled: false, danger: false, innerHtml: "Save" },
        { key: "gitCheckout", type: MenuStructureType.MenuItem, thunkKey: ThunkKey.submitGitCheckoutWithRef, disabled: false, danger: false, innerHtml: "Discard Changes" },
        {
            key: "divider2", type: MenuStructureType.MenuDivider
        },
        { key: "refreshBranches", type: MenuStructureType.MenuItem, thunkKey: ThunkKey.submitGitRefresh, disabled: false, danger: false, innerHtml: "Fetch Branches" },
        { key: "newBranch", type: MenuStructureType.MenuItem, thunkKey: ThunkKey.createGitBranch, disabled: false, danger: false, innerHtml: "New Branch" },
        { key: "gitMerge", type: MenuStructureType.MenuItem, thunkKey: ThunkKey.submitGitMerge, disabled: true, danger: false, innerHtml: "Publish" },
    ]
};

export const MENU2: VersionControlMenuState = {
    navPeep: <Antd.Typography.Text><ForkOutlined /> On Branch Master</Antd.Typography.Text>,
    menuStructure: [
        { key: "viewStatus2", type: MenuStructureType.MenuItem, icon: <FileSearchOutlined />, thunkKey: ThunkKey.viewYamlFile, disabled: false, danger: false, innerHtml: "Status" },
        { key: "viewCommit2", type: MenuStructureType.MenuItem, icon: <SaveOutlined />, thunkKey: ThunkKey.stageForCommit, disabled: false, danger: false, innerHtml: "Commit" },
        {
            key: "divider0", type: MenuStructureType.MenuDivider
        },
        {
            key: "changeBranch", type: MenuStructureType.SubMenu, title: "Change Branch", icon: <BranchesOutlined />, disabled:true, menuStructure: []
        },
        /*{
            key: "divider1", type: MenuStructureType.MenuDivider
        },
        { key: "gitCommit2", type: MenuStructureType.MenuItem, thunkKey: ThunkKey.submitGitCommitWithRef, disabled: false, danger: false, innerHtml: "Save" },
        { key: "gitCheckout2", type: MenuStructureType.MenuItem, thunkKey: ThunkKey.submitGitCheckoutWithRef, disabled: false, danger: false, innerHtml: "Discard Changes" },*/
        {
            key: "divider2", type: MenuStructureType.MenuDivider
        },
        { key: "refreshBranches", type: MenuStructureType.MenuItem, thunkKey: ThunkKey.submitGitRefresh, disabled: false, danger: false, innerHtml: "Fetch Branches" },
        { key: "newBranch", type: MenuStructureType.MenuItem, thunkKey: ThunkKey.createGitBranch, disabled: false, danger: false, innerHtml: "New Branch" }
    ]
};

export const MENU3: VersionControlMenuState = {
    navPeep: <Antd.Typography.Text><ForkOutlined /> On Branch Master</Antd.Typography.Text>,
    menuStructure: [
        { key: "viewStatus2", type: MenuStructureType.MenuItem, icon: <FileSearchOutlined />, thunkKey: ThunkKey.viewYamlFile, disabled: false, danger: false, innerHtml: "Status" },
        { key: "viewCommit2", type: MenuStructureType.MenuItem, icon: <SaveOutlined />, thunkKey: ThunkKey.stageForCommit, disabled: false, danger: false, innerHtml: "Commit" },
        {
            key: "divider0", type: MenuStructureType.MenuDivider
        },
        {
            key: "changeBranch", type: MenuStructureType.SubMenu, title: "Change Branch", icon: <BranchesOutlined />, disabled:true, menuStructure: []
        },
        /*{
            key: "divider1", type: MenuStructureType.MenuDivider
        },
        { key: "gitCommit2", type: MenuStructureType.MenuItem, thunkKey: ThunkKey.submitGitCommitWithRef, disabled: false, danger: false, innerHtml: "Save" },
        { key: "gitCheckout2", type: MenuStructureType.MenuItem, thunkKey: ThunkKey.submitGitCheckoutWithRef, disabled: false, danger: false, innerHtml: "Discard Changes" },*/
        {
            key: "divider2", type: MenuStructureType.MenuDivider
        },
        { key: "refreshBranches", type: MenuStructureType.MenuItem, thunkKey: ThunkKey.submitGitRefresh, disabled: false, danger: false, innerHtml: "Fetch Branches" },
        { key: "newBranch", type: MenuStructureType.MenuItem, thunkKey: ThunkKey.createGitBranch, disabled: false, danger: false, innerHtml: "New Branch" },
        { key: "gitMerge", type: MenuStructureType.MenuItem, thunkKey: ThunkKey.submitGitMerge, disabled: false, danger: false, innerHtml: "Merge" },
    ]
};


const getMenuObj = (gitBranches, activeBranch)=>{
    const getChangeBranchIndex = (arr) =>{
        return arr.findIndex((obj)=>{
            return (obj.key == "changeBranch")
        })
    }
    let workingMenuObj;
    if(!activeBranch || !gitBranches){
       return MENU0;
    } else if (activeBranch == 'master' ){
        workingMenuObj = MENU2;
    } else {
        workingMenuObj = MENU3;
    }
    
    workingMenuObj.navPeep = <Antd.Typography.Text><ForkOutlined /> On Branch {activeBranch}</Antd.Typography.Text>
    const changeBranchIndex = getChangeBranchIndex(workingMenuObj.menuStructure);
    workingMenuObj.menuStructure[changeBranchIndex].menuStructure = gitBranches.map((str, i)=>{
        return { key: (str+"_"+i), type:MenuStructureType.MenuItem, thunkKey: ThunkKey.submitActiveBranch, params: {branchName: str}, disabled: false, danger: false, innerHtml: str }
    })
    return workingMenuObj;
}

declare const getChildren;
export const MenuGenerator = (props: { menuStructureRoot: any }): any => {
    const { menuStructureRoot } = props;
    const dispatch = useDispatch();
    const userConfig:Shared.State.IUserConfig = useSelector(state=> (state as any).userConfig)
    
    const getParent =(RootComponent, menuStructure, title, key, icon)=> {
        switch(RootComponent){
            case MenuStructureType.Menu:
                return <Menu>
                    {menuStructure.map((o, i) => {
                        return getChildren(o)
                    })}
                </Menu>
                break;
            case MenuStructureType.SubMenu:
                return <Menu.SubMenu icon={icon} title={title} key={key}>
                    {menuStructure.map((o, i) => {
                        return getChildren(o)
                    })}
                </Menu.SubMenu>
                break;
            default:
                console.assert(false);
        }
    }
    const getChildren = (o)=>{
        switch (o.type) {
            case MenuStructureType.ItemGroup:
                return (
                    <Menu.ItemGroup key={o.key} title={o.title}>
                        {o.menuItems.map((o2, i2) => {
                            return (
                                <Menu.Item
                                    key={o2.key}
                                    onClick={(e) => {
                                        dispatch(getThunk(o2.thunkKey)(o2.params))
                                    }}
                                    disabled={o2.disabled}
                                    danger={o2.danger}>
                                    {o2.innerHtml}
                                </Menu.Item>
                            )
                        })}
                    </Menu.ItemGroup>
                )
                break;
            case MenuStructureType.MenuItem:
                return (
                    <Menu.Item
                        key={o.key}
                        icon={(o.icon) ? o.icon : null}
                        onClick={(e) => {
                            dispatch(getThunk(o.thunkKey)(o.params))
                        }}
                        disabled={o.disabled}
                        danger={o.danger}>
                        {o.innerHtml}
                    </Menu.Item>
                )
                break;
            case MenuStructureType.MenuDivider:
                return <Menu.Divider key={o.key}/>
                break;
            case MenuStructureType.SubMenu:
                return getParent(MenuStructureType.SubMenu, o.menuStructure, o.title, o.key, o.icon)
                break;
            default:
                console.assert(false);
        }
    }
    return getParent(MenuStructureType.Menu, menuStructureRoot, null, null, null)
}

export const VersionControlMenu = (props: {}) => {
    const dispatch = useDispatch();
    const versionControlState = useSelector(state => (state as any).versionControlState);
    const gitBranches = useSelector(state => (state as any).userConfig.gitBranches);
    const activeBranch = useSelector(state=> (state as any).userConfig.activeBranch);
    const menuState = getMenuObj( gitBranches, activeBranch);
    return (
        <Antd.Space size={3}>
            {/*<Antd.Button size="small" onClick={(e) => {
                dispatch(getThunk(ThunkKey.viewYamlFile)())
            }}><CodeOutlined /></Antd.Button>*/}
            {/*<Antd.Button ghost size="small" onClick={(e) => {
                dispatch(getThunk(ThunkKey.createNewTeamMember)())
            }}><UsergroupAddOutlined />Invite Team Member</Antd.Button>*/}
            <Antd.Dropdown.Button overlay={<MenuGenerator menuStructureRoot={menuState.menuStructure}  />} size='small'>
                {menuState.navPeep}
            </Antd.Dropdown.Button>
        </Antd.Space>
    )
}

export const getModalSubmit = (versionControlStatus) =>{
    switch(versionControlStatus){
        case VersionControlStatus.acceptingGitCredentials:
            return ThunkKey.submitGitCredentials;
            break;
        case VersionControlStatus.settingGitCredentials:
            return ThunkKey.dummyFn;
            break;
        case VersionControlStatus.acceptingGitRepo:
            return ThunkKey.submitGitRepo;
            break;
        case VersionControlStatus.settingGitRepo:
            return ThunkKey.updateGitRepo;
            break;
        case VersionControlStatus.acceptingFirstGitCommit:
            return ThunkKey.submitFirstGitCommit;
            break;
        case VersionControlStatus.acceptingGitCommit:
            return ThunkKey.submitGitCommitWithRef;
            break;
        case VersionControlStatus.acceptingGitCheckout:
            return ThunkKey.submitGitCheckoutWithRef;
            break;
        case VersionControlStatus.acceptingGitBranch:
            return ThunkKey.submitGitBranch;
            break;
        case VersionControlStatus.acceptingGitMerge:
            return ThunkKey.submitGitMerge;
            break;
        case VersionControlStatus.viewingYamlFile:
            return ThunkKey.dummyFn;
            break;
        case VersionControlStatus.acceptingNewTeamMember:
            return ThunkKey.dummyFn;
            break;
        default:
            console.assert(false)
    }
}


const getModalContent = (versionControlStatus)=>{
    switch(versionControlStatus){
        case VersionControlStatus.acceptingGitCredentials:
            return <GitCredentialsForm />
        case VersionControlStatus.settingGitCredentials:
            return <GitCredentialsForm />
        case VersionControlStatus.acceptingGitRepo:
            return <CreateRepoForm />
        case VersionControlStatus.settingGitRepo:
            return <CreateRepoForm />
        case VersionControlStatus.acceptingGitCommit:
            return <ModalMonacoCommit />
        case VersionControlStatus.acceptingFirstGitCommit:
            return <ModalMessage msg={readme}/>
        case VersionControlStatus.sendingGitCommit:
            return <ModalMessage msg="Sending Git Commit Request"/>
        case VersionControlStatus.sendingGitCommitWithRef:
            return <ModalMessage msg="Sending Commit Request With Ref/Branch"/>
        case VersionControlStatus.acceptingGitCheckout:
            return <ModalMessage msg="accepting Git Checkout" />
        case VersionControlStatus.sendingGitCheckoutWithRef:
            return <ModalMessage msg="Sending Checkout Request With Ref/Branch"/>
        case VersionControlStatus.settingGitRefresh:
            return <ModalMessage msg="refreshing"/>
        case VersionControlStatus.acceptingGitBranch:
            return <CreateBranchForm />
        case VersionControlStatus.sendingGitBranch:
            return <ModalMessage msg="Sending Git Branch" />
        case VersionControlStatus.sendingGitMerge:
            return <ModalMessage msg="Sending Merge Reqeust"/>
        case VersionControlStatus.acceptingGitMerge:
            return <ModalMessage msg="Merge request failed. Check your open Pull Request in GitHub"/>
        case VersionControlStatus.viewingYamlFile:
            return <ModalMonacoStatus />
        case VersionControlStatus.acceptingNewTeamMember:
            return <CreateNewTeamMemberForm />
        default:
            console.assert(false);
    }
}


export const VersionControlModal = (props: {}):any => {
    const [errorMsg, setErrorMsg] = useState();
    const dispatch = useDispatch();
    const versionControlState = useSelector(state => (state as any).versionControlState)
    const userConfig:Shared.State.IUserConfig = useSelector(state=> (state as any).userConfig)
    const handleOk = () => {
        dispatch(getThunk(getModalSubmit(versionControlState.versionControlStatus))());
    };

    const handleCancel = () => {
        dispatch(hideModal())
    };
    

    const footer = useMemo(()=>{
        let footer = [];
        if(versionControlState.hasOwnProperty("responseMessage") && versionControlState.responseMessage.text){
            footer.push(<Alert key="message" type={versionControlState.responseMessage.type} message={versionControlState.responseMessage.text} />)
            footer.push(<p key='spacer'></p>);
        }
        footer.push(<Button key="back" onClick={handleCancel}>Cancel</Button>);
        footer.push( <Button key="submit" type="primary" loading={versionControlState.isLoading} onClick={handleOk}>Submit</Button>);  
           
        return footer;
    }, [versionControlState.responseMessage, versionControlState.modalVisible, versionControlState.isLoading])
    
    return (
        <div>
            {versionControlState.modalVisible &&
                <Modal
                    centered
                    title={versionControlState.versionControlStatus}
                    width={"65%"}
                    visible={versionControlState.modalVisible}
                    onOk={handleOk}
                    onCancel={handleCancel}
                    footer={footer}
                >
                    {getModalContent(versionControlState.versionControlStatus)}
                </Modal>
            }
        </div>
    );
}

const GitCredentialsForm = (props:{}) => {
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    const tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
    };
    const userConfig:Shared.State.IUserConfig = useSelector(state=> (state as any).userConfig)
    const changeGitUsername = useChangeUserConfig('gitUsername')
    const changeGitToken = useChangeUserConfig('gitToken')
    return (
        <div className="Form">
            <Antd.Form
                {...layout}
                name="gitForm"       
            >
                <Antd.Form.Item
                    label="Github Username"
                    name="gitUsernameInput"
                    initialValue={userConfig.gitUsername}
                    rules={[
                        { required: true, message: 'Please input your username!' },
                    ]}
                >
                    <Antd.Input className="VersionControlInput"  onChange={changeGitUsername} />
                </Antd.Form.Item>

                <Antd.Form.Item
                    label="Github Token"
                    name="tokenInput"
                    extra="The Access Token only needs to be scoped for Repo Access."
                    initialValue={userConfig.gitToken}
                    rules={[
                        { required: true, message: 'Please input your token!' }
                    ]}
                >
                    <Antd.Input.Password onChange={changeGitToken} />
                </Antd.Form.Item>
                <Antd.Form.Item style={{marginTop:'-30px'}} {...tailLayout}>
                    <a className="font3" href="https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token">Need help creating a personal access token?</a>
                </Antd.Form.Item>
            </Antd.Form>
        </div>
    );
}
const CreateRepoForm = (props:{}) => {
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    const tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
    };
    const userConfig:Shared.State.IUserConfig = useSelector(state=> (state as any).userConfig)
    const changeGitRepoName = useChangeUserConfig('gitRepoName')
    return (
        <div className="Form">
            <Antd.Form
                {...layout}
                name="gitForm"
            >
                <Antd.Form.Item
                    label="Github Repo Name"
                    name="gitRepoNameInput"
                    initialValue={userConfig.gitRepoName}
                    rules={[
                        { required: true, message: 'Please input your username!' },
                    ]}
                >
                    <Antd.Input className="VersionControlInput"  onChange={changeGitRepoName} />
                </Antd.Form.Item>
            </Antd.Form>
        </div>
    );
}
const CreateBranchForm = (props:{}) => {
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    const tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
    };
    const userConfig:Shared.State.IUserConfig = useSelector(state=> (state as any).userConfig)
    const changeGitBranchName = useChangeUserConfig('gitBranchName')
    return (
        <div className="Form">
            <Antd.Form
                {...layout}
                name="gitForm"
            >
                <Antd.Form.Item
                    label="Github Branch Name"
                    name="gitBranchName"
                    initialValue={userConfig.gitBranchName}
                    rules={[
                        { required: true, message: 'Please input your New Branch Name!' },
                    ]}
                >
                    <Antd.Input className="VersionControlInput"  onChange={changeGitBranchName} />
                </Antd.Form.Item>
            </Antd.Form>
        </div>
    );
}
const CodeComponent = (props:{}) => {
    let reduxState = useSelector(state => (state as any))
   
    const yamlString = useMemo(() => {
        return YAML.stringify(reduxState.steps);
    }, [])
    return (<div>
            <SyntaxHighlighter language="javascript" style={docco}>
                {yamlString}
            </SyntaxHighlighter>
    </div>);
};

const ModalMessage = (props:{msg})=>{
    const {msg } = props;
    return <div><pre>{msg}</pre></div>
}

const ModalMonacoStatus = (props:{}) =>{
    let reduxState = useSelector(state => (state as any))
    const [isDiffVisible, setIsDiffVisible] = useState(true);
    const [lastCommitYamlString, setLastCommitYamlString] = useState();
    const dispatch = useDispatch();
    const yamlString = useMemo(() => {
        return getYamlContent(reduxState.treeData[1].serialize(), reduxState.steps);
    }, [])
    const options = {
      selectOnLineNumbers: true, readOnly:true
    };
    const onChange = (checked) => {
        //console.log(`switch to ${checked}`);
        setIsDiffVisible(checked);
    }
    useEffect(()=>{
        dispatch(stageGitCheckoutWithRefThunk()).
        then((data)=>{
            setLastCommitYamlString(data);
        })
        
    },[])
    return (<>
        <Common.DivWithClassName className="rowFlexBox justifyContentSpaceBetween marginBottom10">
            <Antd.Switch 
            defaultChecked={true}
            checkedChildren={<DiffOutlined />} 
            unCheckedChildren={<FileAddOutlined />}
            onChange={onChange} />
            <Antd.Button type="dashed" onClick={(e) => {
                            dispatch(getThunk(ThunkKey.submitGitCheckoutWithRef)())
                        }} >Discard Changes</Antd.Button>
        </Common.DivWithClassName>
        {!isDiffVisible && <MonacoEditor
            width={"100%"}
            height="400"
            language="javascript"
            theme="vs"
            value={yamlString}
            options={options}
        />}
        {isDiffVisible && 
            <MonacoDiffEditor
            width={"100%"}
            height="400"
            language="javascript"
            original={lastCommitYamlString}
            value={yamlString}
            options={options}
        />}
    </>);
}

const ModalMonacoCommit = (props:{}) =>{
    let reduxState = useSelector(state => (state as any))
    
    const yamlString = useMemo(() => {
        return getYamlContent(reduxState.treeData[1].serialize(), reduxState.steps);
    }, [])
    const options = {
      selectOnLineNumbers: true, readOnly:true
    };
    
    const changeGitCommitMessage = useChangeUserConfig('gitCommitMessage')
    debugger;
    return (<>
        <Common.DivWithClassName className="rowFlexBox justifyContentSpaceBetween marginBottom10">
            <Antd.Form name="horizontal_commit_message" layout="horizontal" className="flexGrow">
                <Antd.Form.Item label={<Antd.Typography.Text strong>Commit Message</Antd.Typography.Text>} name="commit_message">
                    <Antd.Input className="VersionControlInput" placeholder="Type your message here..." onChange={changeGitCommitMessage}/>
                </Antd.Form.Item>
            </Antd.Form>     
        </Common.DivWithClassName>
        {yamlString.trim() !== "{}" && <MonacoEditor
            width={"100%"}
            height="400"
            language="javascript"
            theme="vs"
            value={yamlString}
            options={options}
        />
        }
        {yamlString.trim() == "{}" && 
        <Antd.Empty image={Antd.Empty.PRESENTED_IMAGE_SIMPLE} className='justifySelfCenter flexGrow alignSelfCenter minHeightZero overflowHidden' description={<Antd.Typography.Text> Make your first Commit Message</Antd.Typography.Text>}> </Antd.Empty>}
    </>);
}

const CreateNewTeamMemberForm = (props:{}) => {
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    const tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
    };
    const userConfig:Shared.State.IUserConfig = useSelector(state=> (state as any).userConfig)
    const changeNewTeamMemberEmail = useChangeUserConfig('newTeamMemberEmail')
    return (
        <div className="Form">
            <Antd.Form
                {...layout}
                name="newTeamMemberForm"
            >
                <Antd.Form.Item
                    label="New Member Email"
                    name="newTeamMember"
                    rules={[
                        { required: true, message: 'Please input your new team members email!' },
                    ]}
                >
                    <Antd.Input className="VersionControlInput"  onChange={changeNewTeamMemberEmail} />
                </Antd.Form.Item>
            </Antd.Form>
        </div>
    );
}