/* eslint-disable max-len */

// @flow
import * as React   from 'react';
import { FC }       from 'react';
import { cn }       from '../../util/bem';
import { SizeType } from '../../util/global-props';
import LogoSVG      from './logo.svg';
import './geenee-logo.component.scss';

const getColor  = {
    dark:  '#222225',
    light: '#ffffff',
    key:   '#3A57E9'
};

const className = cn('logo');

type PropsType = {
  colorScheme?: 'dark' | 'light';
  width?: number;
  composition?: 'vertical' | 'horizontal';
  keyColor?: boolean;
  customKey?: string;
  onClick?: () => void;
  margin?: SizeType;
}

export const OnePageLogo: FC<PropsType> = (props: PropsType) => {
    let colorFill =  props.colorScheme ? getColor[ props.colorScheme ] : 'dark';
    if (props.keyColor) {
        colorFill = getColor.key;
    }
    if (props.customKey) {
        colorFill = props.customKey;
    }


    return (
        <div
            className={ className({
                composition: props.composition,
                margin:      props.margin
            }) }
            style={ { '--con-logo-size': `${ props.width }px`, cursor: props.onClick && 'pointer' } as React.CSSProperties }
            onClick={ props.onClick }
        >
            <div className={ className('sign') }>
                { /* @ts-ignore */ }
                <LogoSVG fill={ colorFill } />
            </div>
        </div>
    );
};
OnePageLogo.defaultProps = {
    colorScheme: 'dark',
    width:       40
};