text: import classNames from 'classnames';
  import omit from 'lodash.omit';
  import PropTypes from 'prop-types';
  import React from 'react';
  import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';
  import {connect} from 'react-redux';
  import MediaQuery from 'react-responsive';
  import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
  import tabStyles from 'react-tabs/style/react-tabs.css';
  import VM from 'scratch-vm';
  import Renderer from 'scratch-render';
  
  //import Modal from 'react-modal';
  import Modal from 'react-awesome-modal';
  
  import Blocks from '../../containers/blocks.jsx';
  import CostumeTab from '../../containers/costume-tab.jsx';
  import TargetPane from '../../containers/target-pane.jsx';
  import SoundTab from '../../containers/sound-tab.jsx';
  import StageWrapper from '../../containers/stage-wrapper.jsx';
  import Loader from '../loader/loader.jsx';
  import Box from '../box/box.jsx';
  import MenuBar from '../menu-bar/menu-bar.jsx';
  import CostumeLibrary from '../../containers/costume-library.jsx';
  import BackdropLibrary from '../../containers/backdrop-library.jsx';
  import Watermark from '../../containers/watermark.jsx';
  
  import Backpack from '../../containers/backpack.jsx';
  import WebGlModal from '../../containers/webgl-modal.jsx';
  import TipsLibrary from '../../containers/tips-library.jsx';
  import Cards from '../../containers/cards.jsx';
  import Alerts from '../../containers/alerts.jsx';
  import DragLayer from '../../containers/drag-layer.jsx';
  import ConnectionModal from '../../containers/connection-modal.jsx';
  import TelemetryModal from '../telemetry-modal/telemetry-modal.jsx';
  
  import layout, {STAGE_SIZE_MODES} from '../../lib/layout-constants';
  import {resolveStageSize} from '../../lib/screen-utils';
  
  import styles from './gui.css';
  import addExtensionIcon from './icon--extensions.svg';
  import codeIcon from './ico_ Code-White.png';
  //import codeIcon from './icon--code.svg';
  
  import costumesIcon from './ico_ Costumes-White.png';
  //import costumesIcon from './icon--costumes.svg';
  //ico_ Sound-White.png
  import soundsIcon from './ico_ Sound-White.png';
  
  
  //import soundsIcon from './icon--sounds.svg';
  //ico_ Costumes-White.png
  
  
  import Table from '@material-ui/core/Table';
  import TableBody from '@material-ui/core/TableBody';
  import TableCell from '@material-ui/core/TableCell';
  import TableHead from '@material-ui/core/TableHead';
  import TableRow from '@material-ui/core/TableRow';
  import Button from '@material-ui/core/Button';
  import CreateIcon from '@material-ui/icons/Create';
  import DeleteIcon from '@material-ui/icons/Delete';
  import Typography from '@material-ui/core/Typography';
  import { flex } from 'to-style/src/prefixProperties';
  
  
  const messages = defineMessages({
      addExtension: {
          id: 'gui.gui.addExtension',
          description: 'Button to add an extension in the target pane',
          defaultMessage: 'Add Extension'
      }
  });
  
  // Cache this value to only retrieve it once the first time.
  // Assume that it doesn't change for a session.
  let isRendererSupported = null;
  const customStyles = {
      content : {
        top                   : '50%',
        left                  : '50%',
        right                 : 'auto',
        bottom                : 'auto',
        marginRight           : '-50%',
        transform             : 'translate(-50%, -50%)',
        color      : '#2d365d'
      }
    };
  
  
  
  //class Examples extends Component
  const GUIComponent = props =>
   {
  
  
      var subtitle;
     
      function closeModal(){
        setIsOpen(false);
      }
  
  
      const {
          accountNavOpen,
          activeTabIndex,
          alertsVisible,
          authorId,
          authorThumbnailUrl,
          authorUsername,
          basePath,
          backdropLibraryVisible,
          backpackHost,
          backpackVisible,
          blocksTabVisible,
          cardsVisible,
          canChangeLanguage,
          canCreateNew,
          canEditTitle,
          canManageFiles,
          canRemix,
          canSave,
          canCreateCopy,
          canShare,
          canUseCloud,
          children,
          connectionModalVisible,
          costumeLibraryVisible,
          costumesTabVisible,
          enableCommunity,
          intl,
          isCreating,
          isFullScreen,
          isPlayerOnly,
          isRtl,
          isShared,
          isTelemetryEnabled,
          loading,
          logo,
          renderLogin,
          onClickAbout,
          onClickAccountNav,
          onCloseAccountNav,
          onLogOut,
          onOpenRegistration,
          onToggleLoginOpen,
          onActivateCostumesTab,
          onActivateSoundsTab,
          onActivateTab,
          onClickLogo,
          onExtensionButtonClick,
          onProjectTelemetryEvent,
          onRequestCloseBackdropLibrary,
          onRequestCloseCostumeLibrary,
          onRequestCloseTelemetryModal,
          onSeeCommunity,
          onShare,
          onShowPrivacyPolicy,
          onStartSelectingFileUpload,
          onTelemetryModalCancel,
          onTelemetryModalOptIn,
          onTelemetryModalOptOut,
          showComingSoon,
          showMyProject,
          soundsTabVisible,
          stageSizeMode,
          targetIsStage,
          telemetryModalVisible,
          tipsLibraryVisible,
          vm,
          ...componentProps
      } = omit(props, 'dispatch');
      if (children) {
          return <Box {...componentProps}>{children}</Box>;
      }
  
      /** {row.id}
                          <TableCell align="right">{row.firstName}</TableCell>
                          <TableCell align="right">{row.lastName}</TableCell>
                          <TableCell align="right">{row.username}</TableCell>
                          <TableCell align="right">{row.age}</TableCell>
                          <TableCell align="right">{row.salary} */
  
      const users = [
          {
              id:1,
              firstName:"Dong",
              lastName:"Ding",
              username:"Dinh Dong",
              age:20,
              salary:20000
          
          },
          { id:2,
              firstName:"Dong",
              lastName:"Ding",
              username:"Dinh Dong",
              age:20,
              salary:20000}, 
          {id:3,
              firstName:"Dong",
              lastName:"Ding",
              username:"Dinh Dong",
              age:20,
              salary:20000},
          {id:4,
              firstName:"Dong",
              lastName:"Ding",
              username:"Dinh Dong",
              age:20,
              salary:20000}, 
          {id:5,
              firstName:"Dong",
              lastName:"Ding",
              username:"Dinh Dong",
              age:20,
              salary:20000}];
  
      const tabClassNames = {
          tabs: styles.tabs,
          tab: classNames(tabStyles.reactTabsTab, styles.tab),
          tabList: classNames(tabStyles.reactTabsTabList, styles.tabList),
          tabPanel: classNames(tabStyles.reactTabsTabPanel, styles.tabPanel),
          tabPanelSelected: classNames(tabStyles.reactTabsTabPanelSelected, styles.isSelected),
          tabSelected: classNames(tabStyles.reactTabsTabSelected, styles.isSelected)
      };
  
      if (isRendererSupported === null) {
          isRendererSupported = Renderer.isSupported();
      }
  
      return (<MediaQuery minWidth={layout.fullSizeMinWidth}>{isFullSize => {
          const stageSize = resolveStageSize(stageSizeMode, isFullSize);
  
          return isPlayerOnly ? (
              <StageWrapper
                  isFullScreen={isFullScreen}
                  isRendererSupported={isRendererSupported}
                  isRtl={isRtl}
                  loading={loading}
                  stageSize={STAGE_SIZE_MODES.large}
                  vm={vm}
              >
                  {alertsVisible ? (
                      <Alerts className={styles.alertsContainer} />
                  ) : null}
              </StageWrapper>
          ) : (
  
              <Modal styles={styles} visible={showMyProject} effect="fadeInUp" onClickAway={() => this.closeModal()}>
              <div style={{display:flex, justifyContent:'center', backgroundColor:'lightgray'}}>
  
              <Table style={{width:"100%", height:"80%", alignSelf:'center', margin:0}}>
              <TableHead style={{backgroundColor:'#2d365d'}}>
                  <TableRow>
                      <TableCell style={{color:"#FFF"}}>Id</TableCell>
                      <TableCell style={{color:"#FFF"}}>Tên dự án</TableCell>
                      <TableCell style={{color:"#FFF"}} align="right">Mô tả</TableCell>
                      <TableCell style={{color:"#FFF"}} align="right">Thời gian tạo</TableCell>
                      <TableCell style={{color:"#FFF"}} align="right">Hình ảnh</TableCell>
                      <TableCell style={{color:"#FFF"}} align="right">Salary</TableCell>
                  </TableRow>
              </TableHead>
              <TableBody>
                  {users.map(row => (
                      <TableRow key={row.id}>
                          <TableCell component="th" scope="row">
                              {row.id}
                          </TableCell>
                          <TableCell align="right">{row.firstName}</TableCell>
                          <TableCell align="right">{row.lastName} </TableCell>
                          <TableCell align="right">{row.username} </TableCell>
                          <TableCell align="right">{row.age}      </TableCell>
                          <TableCell align="right">{row.salary}   </TableCell>
                          <TableCell align="right" ><CreateIcon /></TableCell>
                          <TableCell align="right"><DeleteIcon /> </TableCell>
                      </TableRow>
                  ))}
              </TableBody>
          </Table>
                     
                    
              </div>
              </Modal>
        );
      }}</MediaQuery>);
  };
  
  GUIComponent.propTypes = {
      accountNavOpen: PropTypes.bool,
      activeTabIndex: PropTypes.number,
      authorId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), // can be false
      authorThumbnailUrl: PropTypes.string,
      authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), // can be false
      backdropLibraryVisible: PropTypes.bool,
      backpackHost: PropTypes.string,
      backpackVisible: PropTypes.bool,
      basePath: PropTypes.string,
      blocksTabVisible: PropTypes.bool,
      canChangeLanguage: PropTypes.bool,
      canCreateCopy: PropTypes.bool,
      canCreateNew: PropTypes.bool,
      canEditTitle: PropTypes.bool,
      canManageFiles: PropTypes.bool,
      canRemix: PropTypes.bool,
      canSave: PropTypes.bool,
      canShare: PropTypes.bool,
      canUseCloud: PropTypes.bool,
      cardsVisible: PropTypes.bool,
      children: PropTypes.node,
      costumeLibraryVisible: PropTypes.bool,
      costumesTabVisible: PropTypes.bool,
      enableCommunity: PropTypes.bool,
      intl: intlShape.isRequired,
      isCreating: PropTypes.bool,
      isFullScreen: PropTypes.bool,
      isPlayerOnly: PropTypes.bool,
      isRtl: PropTypes.bool,
      isShared: PropTypes.bool,
      loading: PropTypes.bool,
      logo: PropTypes.string,
      onActivateCostumesTab: PropTypes.func,
      onActivateSoundsTab: PropTypes.func,
      onActivateTab: PropTypes.func,
      onClickAccountNav: PropTypes.func,
      onClickLogo: PropTypes.func,
      onCloseAccountNav: PropTypes.func,
      onExtensionButtonClick: PropTypes.func,
      onLogOut: PropTypes.func,
      onOpenRegistration: PropTypes.func,
      onRequestCloseBackdropLibrary: PropTypes.func,
      onRequestCloseCostumeLibrary: PropTypes.func,
      onRequestCloseTelemetryModal: PropTypes.func,
      onSeeCommunity: PropTypes.func,
      onShare: PropTypes.func,
      onShowPrivacyPolicy: PropTypes.func,
      onStartSelectingFileUpload: PropTypes.func,
      onTabSelect: PropTypes.func,
      onTelemetryModalCancel: PropTypes.func,
      onTelemetryModalOptIn: PropTypes.func,
      onTelemetryModalOptOut: PropTypes.func,
      onToggleLoginOpen: PropTypes.func,
      renderLogin: PropTypes.func,
      showComingSoon: PropTypes.bool,
      showMyProject: PropTypes.bool,
      soundsTabVisible: PropTypes.bool,
      stageSizeMode: PropTypes.oneOf(Object.keys(STAGE_SIZE_MODES)),
      targetIsStage: PropTypes.bool,
      telemetryModalVisible: PropTypes.bool,
      tipsLibraryVisible: PropTypes.bool,
      vm: PropTypes.instanceOf(VM).isRequired
  };
  GUIComponent.defaultProps = {
      backpackHost: null,
      backpackVisible: false,
      basePath: './',
      canChangeLanguage: true,
      canCreateNew: false,
      canEditTitle: false,
      canManageFiles: true,
      canRemix: false,
      canSave: false,
      canCreateCopy: false,
      canShare: false,
      canUseCloud: false,
      enableCommunity: false,
      isCreating: false,
      isShared: false,
      loading: false,
      showComingSoon: false,
      showMyProject: true,
      stageSizeMode: STAGE_SIZE_MODES.large
  };
  
  const mapStateToProps = state => ({
      // This is the button's mode, as opposed to the actual current state
      stageSizeMode: state.scratchGui.stageSize.stageSize
  });
  
  export default injectIntl(connect(
      mapStateToProps
  )(GUIComponent));
  