import { color } from '@preply/ds-core';
import { Feature } from '@preply/ds-core-types';
import { getTokenVar as t } from '@preply/ds-web-core';
import { Icon, LayoutFlex, Text } from '@preply/ds-web-lib';
import React, { FC } from 'react';

import { importSvgFileName } from '../functions/import-svg-file-name';

interface Props {
    icon: Feature | null;
}

const CopyCodeBlock = ({ code }) => {
    const positiveBg = t(color.background.positiveDark);
    return (
        <div
            style={{
                display: 'flex',
                flexDirection: 'column',
                gap: '16px',
                backgroundColor: '#f5f2f0',
                color: 'darkslategray',
                borderRadius: 4,
                padding: 4,
            }}
        >
            <pre
                style={{
                    fontFamily: 'monospace',
                    fontSize: '12px',
                }}
            >
                <code style={{ whiteSpace: 'pre-wrap', overflowWrap: 'break-word' }}>{code}</code>
            </pre>
            <button
                type="button"
                onClick={async e => {
                    const btn = e.currentTarget;
                    await navigator.clipboard.writeText(code);
                    btn.animate(
                        [
                            { color: 'black', backgroundColor: 'none' },
                            { color: 'white', backgroundColor: positiveBg },
                            { color: 'black', backgroundColor: 'none' },
                        ],
                        {
                            duration: 500,
                            easing: 'ease-in-out',
                        },
                    );
                }}
                style={{
                    alignSelf: 'end',
                    fontSize: '12px',
                    border: 'none',
                    borderRadius: '4px',
                    backgroundColor: 'none',
                    cursor: 'pointer',
                }}
            >
                Copy
            </button>
        </div>
    );
};

const RNIconDetails: FC<Props> = ({ icon }) => {
    if (!icon) return null;

    if (!icon.name.startsWith('TokyoUI'))
        return (
            <>
                <h3>React Native</h3>
                <p>Non-TokyoUI icons are not supported in React Native.</p>
            </>
        );

    const rnIconName = icon.name.replace('TokyoUI', '');

    const rnCodeSnippet = `
import { Icon } from '@preply/ds-rn-lib';

<Icon name="${rnIconName}" />`;

    return (
        <>
            <h3>React Native</h3>
            <CopyCodeBlock code={rnCodeSnippet.trim()} />
        </>
    );
};

export const IconDetails: FC<Props> = ({ icon }) => {
    if (!icon) {
        return (
            <div
                style={{
                    position: 'sticky',
                    top: '4px',
                    border: '1px solid lightgray',
                    borderRadius: '4px',
                    textAlign: 'center',
                    alignContent: 'center',
                    height: 'fit-content',
                }}
            >
                <p>select an icon</p>
            </div>
        );
    }

    const isDeprecated = typeof icon.name === 'string' && !icon.name.startsWith('TokyoUI');

    const importStatement = `import ${icon.name} from '@preply/ds-media-icons/dist/24/${icon.name}.svg';`;
    const iconUsage = `<Icon svg={${icon.name}} />`;

    return (
        <div
            style={{
                position: 'sticky',
                top: '4px',
                border: '1px solid lightgray',
                borderRadius: '4px',
                padding: '16px',
                height: 'fit-content',
                backgroundColor: isDeprecated ? t(color.background.warningLight) : 'unset',
            }}
        >
            {isDeprecated && (
                <Text accent="warning" variant={'large-semibold-italic'}>
                    This icon is deprecated, use the &quot;TokyoUI&quot;-prefixed one
                </Text>
            )}
            <LayoutFlex>
                <Icon svg={importSvgFileName(icon.name)} size="16" />
                <Icon svg={importSvgFileName(icon.name)} size="24" />
                <Icon svg={importSvgFileName(icon.name)} size="32" />
                <Icon svg={importSvgFileName(icon.name)} size="48" />
            </LayoutFlex>
            <h2>{icon.name}</h2>
            <p>{icon.description}</p>
            <p>Import the icon from:</p>
            <CopyCodeBlock code={importStatement} />
            <p>Then render it using the Icon component:</p>
            <CopyCodeBlock code={iconUsage} />
            <br />
            <RNIconDetails icon={icon} />
            <h3>Color customizations</h3>
            <p>
                The icon should allow changing its black fill color with everything else. Here the
                icon should look red on a soft-red background.
            </p>
            <div
                style={{
                    color: t(color.text.critical),
                    background: t(color.background.criticalLight),
                }}
            >
                <Icon svg={importSvgFileName(icon.name)} />
            </div>
        </div>
    );
};