/**
 * 活动信息列表
 * @邠心vbe on 2023/08/17
 */
import React, { Component } from 'react';
import { View, Text, FlatList, StyleSheet, RefreshControl } from 'react-native';
import apiNotification from '../../api/apiNotification';
import Dialog from '../../components/Dialog';
import { MyRefreshProps } from '../../components/ThemesConfig';
import { PageList } from '../Router';
import ItemView from './ItemView';

export default class Promotions extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataList: [],
      refreshing: false
    };
    this.open = false;
  }

  componentDidMount() {
    //this.getMessageList();
    if (this.open) {
      this.props.navigation.addListener('focus', () => {
        this.getMessageList();
      });
    }
  }

  toDetail(item={}) {
    if (item.notificationId) {
      startPage(PageList.viewPromotion, {id: item.notificationId});
    }
  }

  toDelete(item={}) {
    if (item.notificationId) {
      Dialog.showDialog({
        title: $t("notification.deleteMessage"),
        message: $t("notification.confirmDelete"),
        ok: $t("nav.confirm"),
        callback: (btn) => {
          if (btn == Dialog.BUTTON_OK) {
            this.deleteMessage(item.notificationId);
          }
        }
      })
    }
  }

  deleteMessage(id) {
    this.setState({
      refreshing: true
    })
    apiNotification.deleteMessage(id).then(res => {
      toastShort($t("common.deleteSuccess"))
      this.getMessageList();
    }).catch(err => {
      toastShort(err)
      this.setState({
        refreshing: false
      })
    })
  }

  getMessageList() {
    this.setState({
      refreshing: true
    })
    apiNotification.getNotificationList().then(res => {
      if (res.data) {
        this.setState({
          dataList: res.data
        })
      }
    }).catch(err => {
      toastShort(err)
    }).finally(() => {
      this.setState({
        refreshing: false
      })
    })
  }

  listItem = (props) => {
    return (
      <ItemView
        {...props}
        onPress={() => this.toDetail(props.item)}
        onLongPress={() => this.toDelete(props.item)}
      />
    )
  }

  render() {
    if (this.open) {
      return (
        <FlatList
          style={styles.listView}
          data={this.state.dataList}
          renderItem={this.listItem}
          keyExtractor={item => item.notificationId}
          refreshControl={
            <RefreshControl
              {...MyRefreshProps()}
              refreshing={this.state.refreshing}
              onRefresh={() => this.getMessageList()}
            />
          }
          ListEmptyComponent={<Text style={styles.noData} allowFontScaling={false}>{$t('notification.empty')}</Text>}
        />
      );
    } else {
      return (
        <View>
          <Text style={ui.noData} allowFontScaling={false}> Coming soon </Text>
        </View>
      );
    }
  }
}

const styles = StyleSheet.create({
  listView: {
    flex: 1
  },
  noData: {
    color: textPlacehoder,
    fontSize: 14,
    padding: 20,
    textAlign: 'center'
  }
})