import type { FC } from 'react';
import React from 'react';
import { Tooltip } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-i18n';
import { GlyphIcon } from '@theorchard/suite-icons';
import cx from 'classnames';
import Segment from '../../segment';

const CLASS_NAME = 'MainNavToggle';

export interface Props {
    onChange: () => void;
    collapsed: boolean;
}

export const MainNavToggle: FC<Props> = ({ onChange, collapsed }) => (
    <div className={cx(CLASS_NAME, { collapsed })} data-testid={CLASS_NAME} tabIndex={1}>
        <button
            className={`${CLASS_NAME}-button`}
            data-testid={`${CLASS_NAME}-button`}
            onClick={() => {
                onChange();
                const msg = `Click - MainNavToggle - ${collapsed ? 'expand' : 'collapse'}`;
                void Segment.trackEvent(msg);
            }}
            onKeyPress={() => onChange}
        >
            <Tooltip
                id={`${CLASS_NAME}-tooltip`}
                message={formatMessage(`navigation_${collapsed ? 'expand' : 'collapse'}`)}
                placement="right"
            >
                <GlyphIcon name="playPause" size={24} />
            </Tooltip>
        </button>
    </div>
);