import { Typography } from '@fibrous/semi-ui-react';

export default function TypographyDemo() {
    const { Title } = Typography;
    return (
        <div>
            <Title style={{ margin: '8px 0' }}>h1. Semi Design</Title>
            <Title heading={2} style={{ margin: '8px 0' }}>
                h2. Semi Design
            </Title>
            <Title heading={3} style={{ margin: '8px 0' }}>
                h3. Semi Design
            </Title>
            <Title heading={4} style={{ margin: '8px 0' }}>
                h4. Semi Design
            </Title>
            <Title heading={5} style={{ margin: '8px 0' }}>
                h5. Semi Design
            </Title>
            <Title heading={6} style={{ margin: '8px 0' }}>
                h6. Semi Design
            </Title>
        </div>
    );
}

import { Typography } from '@fibrous/semi-ui-react';

export default function TypographyDemo() {
    const { Text } = Typography;
    return (
        <div>
            <Text>Text</Text>
            <br />
            <br />
            <Text type="secondary">Secondary</Text>
            <br />
            <br />
            <Text type="tertiary">{`Tertiary v>=1.2.0`}</Text>
            <br />
            <br />
            <Text type="quaternary">{`Quaternary v>=1.2.0`}</Text>
            <br />
            <br />
            <Text type="warning">Warning</Text>
            <br />
            <br />
            <Text type="danger">Danger</Text>
            <br />
            <br />
            <Text type="success">{`Success v>=1.7.0`}</Text>
            <br />
            <br />
            <Text disabled>Disabled</Text>
            <br />
            <br />
            <Text mark>Default Mark</Text>
            <br />
            <br />
            <Text code>Example Code</Text>
            <br />
            <br />
            <Text underline>Underline</Text>
            <br />
            <br />
            <Text delete>Deleted</Text>
            <br />
            <br />
            <Text strong>Strong</Text>
        </div>
    );
}

import { IconLink } from '@fibrous/semi-icons-react';
import { Typography } from '@fibrous/semi-ui-react';

export default function TypographyDemo() {
    const { Text } = Typography;
    return (
        <div>
            <Text link={{ href: 'https://semi.design/' }}>链接文本</Text>
            <br />
            <br />
            <Text link={{ href: 'https://semi.design/' }}>打开网站</Text>
            <br />
            <br />
            <Text link icon={<IconLink />} underline>
                带下划线的网页链接
            </Text>
        </div>
    );
}

import { Typography } from '@fibrous/semi-ui-react';

export default function TypographyDemo() {
    const { Paragraph, Title } = Typography;
    return (
        <div>
            <Title heading={5}>默认行距</Title>
            <Paragraph>Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</Paragraph>
            <br />
            <Title heading={5}>宽松行距</Title>
            <Paragraph spacing="extended">Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</Paragraph>
        </div>
    );
}

import { Typography } from '@fibrous/semi-ui-react';

export default function TypographyDemo() {
    const { Numeral } = Typography;
    return (
        <div>
            <Numeral precision={1} component="div">
                <p>点赞量：1.6111e1 K</p>
            </Numeral>

            <p>
                播放量:
                <Numeral rule="numbers" precision={1}>
                    2.4444e2
                </Numeral>
                K
            </p>

            <Numeral rule="percentages" precision={2} component="div" style={{ marginBottom: 12 }}>
                <p>好评率: 0.915</p>
            </Numeral>

            <Numeral rule="percentages" style={{ marginBottom: 12 }}>
                这场比赛我的胜率是0.6，输的概率是0.4
            </Numeral>

            <Numeral rule="bytes-decimal" precision={2} truncate="floor" component="div">
                <p>已使用: 1000</p>
                <p>未使用: {1024 * 1000}</p>
            </Numeral>

            <Numeral rule="bytes-binary" precision={2} truncate="floor" component="div">
                <p>已使用: 1024</p>
                <p>未使用: {2e12}</p>
            </Numeral>
        </div>
    );
}

import { Typography } from '@fibrous/semi-ui-react';

export default function TypographyDemo() {
    const { Numeral } = Typography;

    function parserTCH(oldVal: string) {
        return oldVal
            .split(' ')
            .map((item) => (Number(item) ? `${item.replace(/(\d)(?=(?:\d{3})+(?:\.|$))/g, '$1,')}+` : item))
            .join(' ');
    }

    const infos = [
        { type: 'Stars', min: '7100' },
        { type: 'Fork', min: '560' },
        { type: 'Downloads', min: '5000000' },
        { type: 'Contributors', min: '100' },
    ].map((item) => (
        <p key={item.min}>
            {item.type}：<b style={{ color: 'var(--semi-violet-5)' }}>{item.min}</b>
        </p>
    ));

    return (
        <div>
            <Numeral parser={parserTCH} component="div">
                Semi Design 重视我们的用户，加入并助力我们不断完善
                {infos}
            </Numeral>
            <br />
            <Numeral link={{ href: 'https://semi.design', target: '_blank' }} parser={parserTCH}>
                现已服务 {1e5} 用户，前往官网 &gt;&gt;
            </Numeral>
        </div>
    );
}

import { Typography } from '@fibrous/semi-ui-react';

export default function TypographyDemo() {
    const { Paragraph, Text } = Typography;
    return (
        <div>
            <Text>正常文本</Text>
            <Paragraph spacing="extended">Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</Paragraph>
            <br />
            <Text size="small">小文本</Text>
            <Paragraph size="small">Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</Paragraph>
            <br />
            <Text size="small">
                这是一段文本，样式为 small
                <Text link size="inherit">
                    这是一段链接，设置 size 为 inherit 继承外部样式设置
                </Text>
            </Text>
        </div>
    );
}

import { IconSetting } from '@fibrous/semi-icons-react';
import { Typography, TextArea, Button, Toast } from '@fibrous/semi-ui-react';

export default function TypographyDemo() {
    const { Paragraph, Text, Numeral } = Typography;
    const timestamp = 1563849138.25;

    return (
        <div>
            <Paragraph copyable>点击右边的图标复制文本。</Paragraph>
            <Paragraph copyable={{ content: 'Hello, Semi Design!' }}>点击复制文本。</Paragraph>
            <Paragraph copyable={{ onCopy: () => Toast.success({ content: '复制文本成功' }) }}>点击右边的图标复制文本。</Paragraph>
            时间戳:{' '}
            <Numeral truncate="ceil" copyable underline>
                {timestamp}s
            </Numeral>
            <Paragraph copyable={{ icon: <IconSetting style={{ color: 'var(--semi-color-link)' }} /> }}>自定义复制节点</Paragraph>
            <Paragraph
                copyable={{
                    content: 'Custom render!',
                    render: (copied, doCopy, config) => {
                        return (
                            <Button size="small" onClick={doCopy}>
                                <span>{copied ? '复制成功' : `点击复制:${config.content}`}</span>
                            </Button>
                        );
                    },
                }}
            >
                自定义复制渲染
            </Paragraph>
            <br />
            <br />
            <Text id="typography-copyable-paste" type="secondary">
                粘贴区域：
            </Text>
            <br />
            <TextArea aria-labelledby="typography-copyable-paste" autosize style={{ width: 320, marginTop: 4 }} rows={3} />
        </div>
    );
}

import { useCallback, type ReactNode } from 'react';
import { Typography, Tooltip, type TooltipProps } from '@fibrous/semi-ui-react';

export default function TypographyDemo() {
    const { Paragraph, Title, Text } = Typography;
    const customRenderTooltip = useCallback((content: TooltipProps['content'], children: ReactNode) => {
        return (
            <Tooltip content={content} style={{ backgroundColor: 'var(--semi-color-primary)' }}>
                {children}
            </Tooltip>
        );
    }, []);

    return (
        <div>
            <Title heading={5} ellipsis={{ showTooltip: true }} style={{ width: 250 }}>
                是一个很长很长很长很长5号标题
            </Title>
            <br />
            <Text
                ellipsis={{
                    showTooltip: {
                        opts: { content: '这是自定义要展示的内容' },
                    },
                }}
                style={{ width: 150 }}
            >
                可以自定义浮层里的展示内容试试看吧
            </Text>
            <br />
            {/* link 也可以传对象，例如 link={{ href: 'https://semi.design/zh-CN/basic/typography', target: '_blank' }} */}
            <Text link ellipsis={{ showTooltip: true, pos: 'middle' }} style={{ width: 150 }}>
                是一个很长很长很长很长的链接
            </Text>
            <br />
            <Paragraph ellipsis={{ suffix: '小尾巴' }} style={{ width: 300 }}>
                有后缀的情况：Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。
            </Paragraph>
            <br />
            <Paragraph ellipsis={{ rows: 3 }} style={{ width: 300 }}>
                这是一个多行截断的例子：Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
            </Paragraph>
            <br />
            <Paragraph ellipsis={{ rows: 3, showTooltip: { type: 'popover', opts: { style: { width: 300 } } } }} style={{ width: 300 }}>
                多行截断，展示 Popover：Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
            </Paragraph>
            <br />
            <Paragraph
                ellipsis={{
                    rows: 3,
                    expandable: true,
                    collapsible: true,
                    collapseText: '折叠我吧',
                    onExpand: (bool, e) => console.log(bool, e),
                }}
                style={{ width: 300 }}
            >
                支持展开和折叠：Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
            </Paragraph>
            <br />
            <Text
                ellipsis={{
                    showTooltip: {
                        opts: { content: '全英文设置了word-break' },
                    },
                    pos: 'middle',
                }}
                style={{ width: 150, wordBreak: 'break-word' }}
            >
                sssssssssssssssssssssssss
            </Text>
            <br />
            <br />
            <Title
                heading={5}
                ellipsis={{
                    showTooltip: {
                        renderTooltip: customRenderTooltip,
                    },
                }}
                style={{ width: 250 }}
            >
                这是一个自定义弹出层组件的省略文本，背景色是蓝色
            </Title>
        </div>
    );
}

import { Typography } from '@fibrous/semi-ui-react';

export default function TypographyDemo() {
    const { Text } = Typography;

    return (
        <div>
            <Text
                ellipsis={{
                    showTooltip: {
                        opts: { content: '架构|Semi-inf|graph.cheet.relation' },
                    },
                }}
                style={{ width: 150 }}
            >
                有问题的超长文本发生截断时可按需进行自定义配置
            </Text>
            <br />
            <Text
                ellipsis={{
                    showTooltip: {
                        opts: {
                            content: '架构|Semi-inf|graph.cheet.relation',
                            className: 'components-typography-demo',
                        },
                    },
                }}
                style={{ width: 150 }}
            >
                覆盖类名超长文本发生截断时可使用类名覆盖进行自定义配置
            </Text>
            <br />
            <Text
                ellipsis={{
                    showTooltip: {
                        opts: { content: '架构|Semi-inf|graph.cheet.relation', style: { wordBreak: 'break-all' } },
                    },
                }}
                style={{ width: 150 }}
            >
                覆盖style超长文本发生截断时可使用style进行自定义配置
            </Text>
        </div>
    );
}