import React , { useState } from 'react' ; import styled from 'styled-components' ; import muiStyled from '@/muiStyled' ; import { DialogTitle , DialogContent , Tabs , Tab } from '@material-ui/core' ; import { EditorModel } from '../EditorModel' ; import { IMG_BASE_URL } from '@/config' ; const DialogTitleS = muiStyled ( DialogTitle ) ( { padding : 12 , paddingTop : 0 , } ) ; const Img = styled . img `
  max-width: 25%;
  padding: 5px;
` ; const FlexDiv = styled . div `
  display: flex;
  flex-wrap: wrap;
  align-items: center;
` ; interface Props { editor : EditorModel ; handleClose : ( ) => void ; } type StickerType = 'ac' | 'tb' | 'ms' | 'em' ; function getStickerReactNode ( type , handleFunc ) { const stickerArr = [ ] ; const suffix = type === 'em' ? 'gif' : type === 'ac' ? 'jpg' : 'png' ; let start = 1 ; let end = 54 ; if ( type === 'tb' ) { end = 33 ; } else if ( type === 'em' ) { start = 0 ; end = 91 ; } for ( let i = start ; i <= end ; i ++ ) { const number = i < 10 ? `0${ i }` : `${ i }` ; const url = type === 'ac' ? `${ type }-mini/${ number }` : type === 'em' ? `${ type }/${ type }${ number }` : `${ type }-mini/${ type }${ number }` ; stickerArr . push ( < Img src = { `${ IMG_BASE_URL }/${ url }.${ suffix }` } onClick = { handleFunc ( `${ type } $ { number } `)}/>);
    }
    return stickerArr;
}
export default ({ editor, handleClose }) => {
    const [type, setType] = useState<StickerType>('ac');
    const handleChange = (_, value) => {
        setType(value);
    };
    const handleClick = (stickerCode) => (_) => {
        editor.appendMainContent(` [ $ { stickerCode } ] `);
        handleClose();
    };
    const StickerArr = getStickerReactNode(type, handleClick);
    return (<>
      <DialogTitleS>
        <Tabs value={type} onChange={handleChange} textColor="primary" indicatorColor="primary" variant="scrollable">
          <Tab value="ac" label="AC娘"/>
          <Tab value="ms" label="雀魂"/>
          <Tab value="tb" label="贴吧"/>
          <Tab value="em" label="经典"/>
        </Tabs>
      </DialogTitleS>

      <DialogContent>
        <FlexDiv>{StickerArr}</FlexDiv>
      </DialogContent>
    </>);
};
