import React from "react";
import compileClassNames from "../../libraries/compileClassNames";
import Box from "../layout/Box";
import Text from "../text/Text";
import {headerPropTypes} from "./Dialog.propTypes";

export default function Header(props){
    let defaultCustomId = "header";
    let {children,customClassNames={},cancelIcon,onClose}=props
    // let headerStyle = customClassNames.header ? customClassNames.header : '';
    // let containerStyle = cancelIcon ? (customClassNames.container ? customClassNames.container : '') : '';
    // let textStyle = cancelIcon ? (customClassNames.label ? customClassNames.label : '') : '';
    // let iconStyle = cancelIcon ? (customClassNames.icon ? customClassNames.icon : '') : '';
    let headerStyle=compileClassNames({
        [customClassNames.header]:!!customClassNames.header
    }),
    containerStyle=compileClassNames({
        [customClassNames.container]:!!customClassNames.container
    }),textStyle=compileClassNames({
        [customClassNames.label]:!!customClassNames.label
    }),iconStyle=compileClassNames({
        [customClassNames.icon]:!!customClassNames.icon
    })
    return(
        cancelIcon?
            (<Box dataId={defaultCustomId}  className={headerStyle}>
                <Box
                    className={containerStyle}
                    align='vertical'
                    alignBox='row'
                    isCover={false}
                    wrap='wrap'>
                    <Box flexible basis className={textStyle}>
                        {typeof children == 'string' ? <Text content={children} weight="bold" size='sm' tagName='h4' /> : children}
                    </Box>
                    <Box className={iconStyle}>
                        {
                            typeof cancelIcon=='boolean'?<Text content='X' weight='bold' size='lg' onClick={onClose} />:cancelIcon
                        }
                    </Box>
                </Box>
            </Box>)
            :(
                <Box dataId={defaultCustomId}  className={headerStyle}>
                    {   typeof children == 'string' ? <Text content={children} weight="bold" size='lg' /> : children }
                </Box>
            )
    )
}

Header.propTypes=headerPropTypes;