import React, { useState } from 'react';
import { Statistic, Result, Avatar, Tag, Input, Space, Row, Col } from 'antd';
import { CheckSquareOutlined, UserOutlined, SmileOutlined } from '@ant-design/icons';
import ProLayout, { PageContainer } from '@ant-design/pro-layout';
import ProCard from '@ant-design/pro-card';
import versionInfos from '../../data/versions.json'
import { valueType } from 'antd/lib/statistic/utils';

const { Divider } = ProCard;

const defaultProps = {
  routes: [
    {
      path: '/version',
      name: 'Version Management',
      icon: <CheckSquareOutlined />,
      component: './Version',
    },
  ],
};

export default () => {
  const [pathname, setPathname] = useState('/version');
  const [responsive, setResponsive] = useState(false);
  const releaseBranches = versionInfos['releaseBranches'];
  const prodTags = versionInfos['prodTags'];
  return (
    <>
      <ProLayout
        route={defaultProps}
        location={{
          pathname,
        }}
        logo={require('../../public/logo.svg')}
        title="Release Management Portal"
        navTheme="light"
        layout='top'
        fixSiderbar
        // headerRender={false}
        onMenuHeaderClick={(e) => console.log(e)}
        menuItemRender={(item, dom) => (
          <a
            onClick={() => {
              setPathname(item.path || '/version');
            }}
          >
            {dom}
          </a>
        )}
      >
        <PageContainer
          onBack={() => null}
          extra={[
            <Input.Search
              key="search"
              style={{
                width: 240,
              }}
            />,
          ]}
        >
          <div
            style={{
              height: '120vh',
            }}
          >
            <Row>
              <ProCard.Group wrap title="Release Branches" direction={responsive ? 'column' : 'row'}>
                {
                  releaseBranches.map((item: { repo: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined; branch: valueType | undefined; }, index: any) => {
                    return (
                      <ProCard colSpan={6}>
                        <Statistic title={item.repo} value={item.branch} />
                      </ProCard>
                    )
                  })
                }
              </ProCard.Group>
            </Row>

            <Row>
              <ProCard.Group wrap title="Prod Tags" direction={responsive ? 'column' : 'row'}>
                {
                  prodTags.map((item: { repo: string; tag: valueType | undefined; }, index: any) => {
                    return (
                      <ProCard colSpan={6}>
                        <Statistic title={item.repo} value={item.tag} />
                      </ProCard>
                    )
                  })
                }
              </ProCard.Group>
            </Row>
          </div>
        </PageContainer>
      </ProLayout>
    </>
  );
};