/* eslint-disable max-len */
// @flow
import * as React   from 'react';
import { cn }       from '../../util/bem';
import { SizeType } from '../../util/global-props';
import './one-page-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 = (props: PropsType) => {
    let colorFill =  getColor[ props.colorScheme ];
    if (props.keyColor) {
        colorFill = getColor.key;
    }
    if (props.customKey) {
        colorFill = props.customKey;
    }

    const logoSign = (
        <svg width="75" height="75" viewBox="0 0 75 75" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill={ getColor[ props.colorScheme ] } d="M37.264 0.969971C30.0411 0.969971 22.9804 3.11181 16.9747 7.12464C10.9691 11.1375 6.2883 16.8411 3.52422 23.5141C0.760131 30.1872 0.03692 37.5301 1.44604 44.6142C2.85516 51.6984 6.33331 58.2055 11.4407 63.3129C16.548 68.4203 23.0552 71.8984 30.1393 73.3075C37.2234 74.7167 44.5663 73.9934 51.2394 71.2294C57.9125 68.4653 63.6161 63.7845 67.6289 57.7788C71.6418 51.7732 73.7836 44.7125 73.7836 37.4896H52.929C52.929 40.5879 52.0103 43.6165 50.289 46.1926C48.5677 48.7687 46.1211 50.7766 43.2587 51.9622C40.3963 53.1479 37.2466 53.4581 34.2079 52.8536C31.1691 52.2492 28.3779 50.7573 26.1871 48.5665C23.9963 46.3757 22.5044 43.5844 21.8999 40.5457C21.2955 37.507 21.6057 34.3573 22.7914 31.4949C23.977 28.6324 25.9848 26.1859 28.5609 24.4646C31.137 22.7433 34.1657 21.8246 37.264 21.8246V0.969971Z" />
            <rect
                fill={ colorFill }
                x="51.1046"
                y="0.969971"
                width="22.679"
                height="22.674"
            />
        </svg>
    );

    const logoText = (
        <svg width="235" height="43" viewBox="0 0 235 43" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill={ getColor[ props.colorScheme ] } fillRule="evenodd" clipRule="evenodd" d="M31.5135 15.8532C31.5135 24.9939 24.6841 31.5102 15.8565 31.5102C7.07369 31.5102 0.199524 24.9939 0.199524 15.8532C0.199524 6.71245 7.07369 0.255798 15.8565 0.255798C24.699 0.255798 31.5135 6.72736 31.5135 15.8532ZM22.507 15.8532C22.507 10.8727 19.3011 8.56147 15.8565 8.56147C12.4716 8.56147 9.20603 10.8727 9.20603 15.8532C9.20603 20.7739 12.4716 23.2045 15.8565 23.2045C19.3011 23.2045 22.507 20.8336 22.507 15.8532ZM45.6197 30.6304H36.5983V1.15052H45.3215V4.53541C46.917 1.74697 50.5405 0.375122 53.5675 0.375122C60.9785 0.375122 64.3038 5.65377 64.3038 12.1253V30.6304H55.2823V13.6612C55.2823 10.7535 53.7316 8.5615 50.4809 8.5615C47.5135 8.5615 45.6197 10.7535 45.6197 13.7209V30.6304ZM84.479 31.5251C91.9496 31.5251 96.6467 27.2455 98.0633 22.1458L90.533 20.0134C89.698 22.3247 87.8638 23.8606 84.5982 23.8606C81.0941 23.8606 78.067 21.4897 77.8881 18.1644H98.4211C98.4808 17.9855 98.6001 16.6286 98.6001 15.376C98.6001 5.89232 92.9636 0.255798 83.8229 0.255798C76.1733 0.255798 69.1202 6.30984 69.1202 15.8084C69.1202 25.7096 76.3522 31.5251 84.479 31.5251ZM83.9421 7.38346C88.2217 7.38346 89.7576 10.1123 89.8769 12.3639H78.067C78.246 10.1719 80.1397 7.38346 83.9421 7.38346ZM103.774 41.8885V1.15044H112.497V4.17746C113.75 2.28371 116.941 0.434692 121.161 0.434692C129.705 0.434692 134.865 6.9659 134.865 15.7935C134.865 24.8149 129.049 31.2715 120.803 31.2715C117.001 31.2715 114.153 29.9593 112.796 28.3042V41.8885H103.774ZM119.312 8.56142C115.808 8.56142 112.662 10.9323 112.662 15.8531C112.662 20.7142 115.808 23.2045 119.312 23.2045C122.876 23.2045 126.022 20.7739 126.022 15.8531C126.022 10.9323 122.876 8.56142 119.312 8.56142ZM153.787 12.5279L146.839 13.6015C141.977 14.3173 138.13 17.2847 138.13 22.4887C138.13 27.1858 141.858 31.4505 148.33 31.4505C152.251 31.4505 155.1 29.7953 156.635 27.3051C156.635 29.3182 156.874 30.3918 156.934 30.6304H165.06C165.001 30.3322 164.702 28.3788 164.702 26.0675V11.6481C164.702 5.59409 161.198 0.255798 151.655 0.255798C142.991 0.255798 139.07 5.83267 138.727 10.0377L146.555 11.6332C146.734 9.44124 148.449 7.30891 151.595 7.30891C154.443 7.30891 155.92 8.80005 155.92 10.5149C155.92 11.5139 155.383 12.2893 153.787 12.5279ZM155.92 17.7469V19.0591C155.92 23.622 153.191 24.9342 150.522 24.9342C148.031 24.9342 147.018 23.4431 147.018 21.9072C147.018 19.8196 148.449 18.9398 150.343 18.6416L155.92 17.7469ZM177.198 30.0339C177.795 32.882 180.166 34.9547 183.551 34.9547C188.054 34.9547 190.842 32.7627 190.842 27.4244V26.0526C189.769 27.6481 187.219 29.3778 182.954 29.3778C175.126 29.3778 169.25 23.2045 169.25 15.0181C169.25 7.24925 174.887 0.598755 182.954 0.598755C187.756 0.598755 190.305 2.73109 191.14 4.28188V1.15048H199.744V26.9473C199.744 35.4319 195.002 42.7832 183.968 42.7832C175.483 42.7832 170.085 37.5642 169.25 32.2855L177.198 30.0339ZM190.902 15.033C190.902 10.992 187.994 8.50181 184.609 8.50181C181.224 8.50181 178.257 10.992 178.257 15.033C178.257 19.074 180.986 21.5642 184.609 21.5642C188.292 21.5493 190.902 19.0591 190.902 15.033ZM220.024 31.525C227.494 31.525 232.192 27.2455 233.608 22.1458L226.078 20.0283C225.243 22.3396 223.409 23.8755 220.143 23.8755C216.639 23.8755 213.612 21.5046 213.433 18.1793H233.981C234.041 18.0004 234.16 16.6434 234.16 15.3909C234.16 5.90721 228.523 0.270691 219.383 0.270691C211.718 0.270691 204.665 6.32473 204.665 15.8084C204.665 25.7096 211.897 31.525 220.024 31.525ZM219.487 7.38344C223.767 7.38344 225.302 10.1122 225.422 12.3639H213.612C213.791 10.1719 215.685 7.38344 219.487 7.38344Z" />
        </svg>
    );


    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') }>
                { logoSign }
            </div>
            { props.composition && <div className={ className('signature') }>{ logoText }</div> }
        </div>
    );
};
OnePageLogo.defaultProps = {
    colorScheme: 'dark',
    width:       40
};
