/**
 * Separator
 *
 * @author Ivan Marshalkin
 * @date 2020-05-28
 */

import * as React from 'react';
import * as styles from './Divider.m.scss';
import {joinClassNames} from '../../utils/joinClassNames';

export type DividerProps = {
    orientation?: 'horizontal' | 'vertical' | 'empty';
    offset?: number;
    size?: number;
    type?: DIVIDER_TYPE;
    text?: string;
}

export enum DIVIDER_TYPE {
    solid = 'solid',
    dashed = 'dashed',
    longDashed = 'longDashed'
}

export class Divider extends React.Component<DividerProps, any> {
    static defaultProps: DividerProps = {
        orientation: 'horizontal',
        offset: 18,
        type: DIVIDER_TYPE.solid
    };

    override render () {
        const margin = this.props.orientation === 'vertical' ? `0 ${this.props.offset}px` : `${this.props.offset}px 0`;
        const size = this.props.size !== undefined ? `${this.props.size}px` : undefined;

        const style: React.CSSProperties = {
            margin: margin,
            [this.props.orientation === 'vertical' ? 'height' : 'width']: size
        };

        if (this.props.text) {
            return (
                <div
                    role={'separator'}
                    style={style}
                    className={joinClassNames(
                        styles.dividerText,
                        [styles.vertical, this.props.orientation === 'vertical'],
                        [styles.horizontal, this.props.orientation === 'horizontal']
                    )}
                    data-component-id={'Divider'}
                >
                    <div
                        className={joinClassNames(
                            styles.sep,
                            [styles.vertical, this.props.orientation === 'vertical'],
                            [styles.horizontal, this.props.orientation === 'horizontal'],
                            [styles.empty, this.props.orientation === 'empty'],
                            [styles.dashed, Boolean(this.props.type === DIVIDER_TYPE.dashed)],
                            [styles.longDashed, Boolean(this.props.type === DIVIDER_TYPE.longDashed)]
                        )}
                    />
                    <div className={styles.text}>{this.props.text}</div>
                    <div
                        className={joinClassNames(
                            styles.sep,
                            [styles.vertical, this.props.orientation === 'vertical'],
                            [styles.horizontal, this.props.orientation === 'horizontal'],
                            [styles.empty, this.props.orientation === 'empty'],
                            [styles.dashed, Boolean(this.props.type === DIVIDER_TYPE.dashed)],
                            [styles.longDashed, Boolean(this.props.type === DIVIDER_TYPE.longDashed)]
                        )}
                    />
                </div>
            );
        }

        return (
            <div
                role={'separator'}
                style={style}
                className={joinClassNames(
                    styles.divider,
                    [styles.vertical, this.props.orientation === 'vertical'],
                    [styles.horizontal, this.props.orientation === 'horizontal'],
                    [styles.empty, this.props.orientation === 'empty'],
                    [styles.dashed, Boolean(this.props.type === DIVIDER_TYPE.dashed)],
                    [styles.longDashed, Boolean(this.props.type === DIVIDER_TYPE.longDashed)]
                )}
                data-component-id={'Divider'}
            />
        );
    }
}