import React from 'react';
import {
  NoticeBar,
  Modal,
  Button,
  Fill,
  Space,
  NoticeBarInstance,
  Toast,
} from '@xrnjs/ui';
import { Text } from 'react-native';
import Card from '_global/Card';
import styles from './style';

const MultipleLines = () => {
  const ref = React.useRef<NoticeBarInstance>(null);

  const multipleTexts1 = [
    {
      content: '第1条重要通知内容',
      actionName: '详情',
      onActionPress: () => {
        Toast('我点击了详情1');
      },
    },
    {
      content: '第2条重要通知内容',
      actionName: '详情',
      onActionPress: () => {
        Toast('我点击了详情2');
      },
    },
    {
      content: '第3条重要通知内容，点击详情没反应',
      actionName: '详情',
      onActionPress: () => {
        Toast('我点击了详情3');
        return false;
      },
    },
    {
      content:
        '第3条重要通知内容，延时关闭,并且我很长,并且我很长,并且我很长,并且我很长,并且我很长,并且我很长,并且我很长,并且我很长',
      actionName: '详情',
      onActionPress: () => {
        Toast('我点击了详情4');
        setTimeout(() => {
          ref.current?.hideModal?.();
        }, 1000);
        return false;
      },
    },
  ];

  const multipleTexts2 = [
    {
      content: '第1条重要通知内容，点击详情没反应',
    },
    {
      content:
        '第2条重要通知内容，延时关闭,并且我很长,并且我很长,并且我很长,并且我很长,并且我很长,并且我很长,并且我很长,并且我很长',
      actionName: '详情',
      onActionPress: () => {
        Toast('我点击了详情');
      },
    },
  ];

  const multipleTexts3 = [
    {
      content:
        '第1条重要通知内容，延时关闭,并且我很长,并且我很长,并且我很长,并且我很长,并且我很长,并且我很长,并且我很长,并且我很长',
      actionName: '详情',
      onActionPress: () => {
        Toast('我点击了详情');
      },
    },
    {
      content: '第2条重要通知内容，点击详情没反应',
    },
  ];

  const multipleTexts4 = [
    {
      content: '第1条重要通知内容',
    },
    {
      content: '第2条重要通知内容',
    },
  ];

  const handleViewDetail = () => {
    Modal({
      message: (
        <>
          <Text>1. 第一条重要通知的详细说明</Text>
          <Text>2. 第二条重要通知的详细说明</Text>
          <Text>3. 第三条重要通知的详细说明</Text>
          <Text>4. 第四条重要通知的详细说明</Text>
        </>
      ),
      showCancelButton: false,
      solidButton: true,
      buttonsDirection: 'column',
      confirmButtonText: '我知道了',
    });
  };

  return (
    <Space>
      <Card style={styles.section} title="多行内容1">
        <NoticeBar
          ref={ref}
          leftIcon="remind"
          showType="multipleLines"
          texts={multipleTexts1}
          numberOfLines={2}
          showBullets={true}
          showMoreText="查看详情"
          popupTitle="通知详情"
        />
      </Card>

      <Card style={styles.section} title="多行内容2">
        <NoticeBar
          leftIcon="remind"
          showType="multipleLines"
          texts={multipleTexts2}
          numberOfLines={2}
          showBullets={true}
          showMoreText="查看详情"
          popupTitle="通知详情"
        />
      </Card>

      <Card style={styles.section} title="多行内容3">
        <NoticeBar
          leftIcon="remind"
          showType="multipleLines"
          texts={multipleTexts3}
          numberOfLines={2}
          showBullets={true}
          showMoreText="查看详情"
          popupTitle="通知详情"
        />
      </Card>

      <Card style={styles.section} title="多行内容4（无超出）">
        <NoticeBar
          leftIcon="remind"
          showType="multipleLines"
          texts={multipleTexts4}
          numberOfLines={2}
          showBullets={true}
          showMoreText="查看详情"
          popupTitle="通知详情"
        />
      </Card>

      <Card style={styles.section} title="自定义多行处理">
        <NoticeBar
          leftIcon
          wrapable
          numberOfLines={3}
          text="这是一个很长的通知内容，包含了多个重要信息点。第一个信息点是关于系统更新的通知。第二个信息点是关于功能优化的说明。第三个信息点是关于用户体验改进的介绍。"
          renderOverFlow={(isOverflow) => {
            return isOverflow ? (
              <Button onPress={handleViewDetail} fill={Fill.link}>
                查看详情
              </Button>
            ) : null;
          }}
        />
      </Card>
    </Space>
  );
};

export default MultipleLines;