import React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  Image,
  ScrollView,
  Share,
  Alert,
  Linking,
  useRef,
  TouchableWithoutFeedback,
  Keyboard,
  TextInput,
  BackHandler,
} from 'react-native';
var _ = require('lodash');
import Toast, { DURATION } from 'react-native-easy-toast';
import moment from 'moment';
import { Hoshi, Kaede, Kohana } from 'react-native-textinput-effects';
import Switch from 'react-native-switch-pro';
import { width, height } from '../../services/screen';
import { images } from '../../assets/images/imageIndex';
import AsyncStorage from '@react-native-community/async-storage';
import Loading from '../../components/Loading';
import { inject, observer } from 'mobx-react';
import HoshiTextInput from '../../components/hoshiTextInput';
import { colors } from '../../assets/styles/colors-theme';
import Rank from '../../components/rank';
import Modal from 'react-native-modal';
import TitleBar from '../../components/titleBar';
import CustomLoginButton from '../../components/customLoginButton';
import { getStatusBarHeight } from 'react-native-status-bar-height';
import { observable } from 'mobx';
import HTMLView from 'react-native-htmlview';
import { Modalize } from 'react-native-modalize';
// import Modal, { ModalContent } from 'react-native-modals';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import * as Progress from 'react-native-progress';
import FeatherIcon from 'react-native-vector-icons/dist/Feather';
import FontAwesomeIcon from 'react-native-vector-icons/dist/FontAwesome';
import MaterialIcon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
//import Adyen from 'adyen-react-native';
import Menu, {
  MenuProvider,
  MenuTrigger,
  MenuOptions,
  MenuOption,
  renderers,
} from 'react-native-popup-menu';

const { SlideInMenu } = renderers;
const langList = [
  { label: '中文', value: 'hk' },
  { label: 'English', value: 'en' },
];

const API_KEY =
  //'AQEhhmfuXNWTK0Qc+iSem3Y3qfffgjkjOauoEZcB7q2DToV3EMFdWw2+5HzctViMSCJMYAc=-kpW/CqOWAmOBWEEhFHdHKKV/dcUBco7qbCGV+/U6KDE=-F?6e&d8kq%7)?D6H';
  'AQEkhmfuXNWTK0Qc+iSem3Y3qffCENhaJNh8FEMlEb7DNf3Ae1UzEMFdWw2+5HzctViMSCJMYAc=-SmX/AHu3xTVV2+Uek0ZHC2MxuW1df26lENMn6T4DVPw=-f3A?_6;kbd&pgK4g';
const MERCHANT_ACCOUNT =
  //'NironsECOM';
  'Nirons983ECOM';

FontAwesomeIcon.loadFont();


@inject('appStore')
@observer
export default class GroupDetails extends React.Component {
  @observable notification = true;
  @observable lang = '中文';
  @observable data = null;
  @observable otherData = null;
  @observable isRecommend = true;
  @observable totalamount = 0
  @observable totalDiscount = 0
  @observable introVisable = false
  @observable modalizeRef = useRef<Modalize>(null);
  @observable phone = ''
  @observable signCheck = false
  @observable salesRecord = []
  constructor(props) {
    super(props);
    this.store = props.appStore;
    this.data = this.props.route.params.data;
    // await this.store.getShippingOrderDate();

    console.log(this.data)
    this.isRecommend = this.props.route.params.isRecommend;
    if (!this.isRecommend) {
      this.otherData = this.props.route.params.otherShoppingGroupData;
      this.findThisMonthTotalAmount()
    }
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
    if (this.otherData != null) {
      this.init()
    }

  }

  init() {
    this.salesRecord = []
    this.otherData.members.map((member, index) => {
      member.orders.map((items, itemsIndex) => {
        console.log(moment(items.cutoffDate).format('DD-MM-YYYY HH:mm'))
        if (moment(items.cutoffDate).valueOf() > moment().valueOf() && items.status == 'PA') {
          this.salesRecord.push(items);
        }
      });
    });
    console.log(this.salesRecord)
  }

  async componentWillMount() { }
  async componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
  }
  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);

  }
  handleBackButtonClick() {
    if (this.store.loginUserData.data.hasOwnProperty('shoppingGroup')) {
      this.props.navigation.navigate('Main')
    } else {
      this.props.navigation.goBack()
    }
    return true
  }

  statusHandler(text) {
    const lang = this.store.text;
    switch (text) {
      case 'PC':
        return lang.pc;
        break;
      case 'PP':
        return lang.pp;
        break;
      case 'PRV':
        return lang.prv;
        break;
      case 'PRJ':
        return lang.prj;
        break;
      case 'PA':
        return lang.pa;
        break;
      case 'ARV':
        return lang.arv;
        break;
      case 'FIN':
        return lang.fin;
        break;
      case 'CAN':
        return lang.can;
        break;
      case 'EXP':
        return lang.exp;
      case "VO":
        return lang.vo;
        break;
    }
  }


  introOpen() {
    this.modalizeRef.current ?.open();
    //this.refs.modalize.current ?.open();
  }

  addMemberAction() {
    if (this.phone == '' || this.phone.length < 8) {
      this.refs.toast.show('Please input the correct phone number ')
    } else {
      this.store.addMemberToGroup(this.phone, this)
    }
  }

  async findThisMonthTotalAmount() {
    var index = await this.otherData.summaries.findIndex(element => element.month == moment().format('YYYYMM'))
    console.log(index)
    this.totalamount = this.otherData.summaries[index].amount
    console.log(this.totalamount)
    this.handleShoppingGroupMemberDiscount()
  }


  renderFreeShip(data) {
    var price = 0
    if (moment(data.cutoffDate).valueOf() > moment().valueOf()) {
      this.salesRecord.map((item, index) => {
        if (data.deliveryDate == item.deliveryDate) {
          price += item.totalPrice
        }
      })
      return (
        <View>
          <Text style={{ fontWeight: '800', color: colors.mainColor, marginVertical: 5 }}>{this.freeShipStringHandler(price)}</Text>
        </View>
      )
    }
  }

  freeShipStringHandler(price) {
    if (price < this.store.shippingMethods.content[this.store.shippingMethods.content.findIndex(e => e.id == 4)].freeShippingMinAmount) {
      var finalPrice = this.store.shippingMethods.content[this.store.shippingMethods.content.findIndex(e => e.id == 4)].freeShippingMinAmount - price
      return (this.store.text.groupFreeShippingMessage1 + finalPrice + this.store.text.groupFreeShippingMessage2)
    } else {
      return (this.store.text.freeShipping)
    }
  }


  renderMembers() {
    if (this.otherData != null) {
      var allSalesRecord = [];
      this.otherData.members.map((member, index) => {
        member.orders.map((items, itemsIndex) => {
          var salesData = {
            data: items,
            name: member.member.name,
          };
          allSalesRecord.push(salesData);
        });
      });

      allSalesRecord.sort((a, b) => {
        return moment(b.data.deliveryDate).valueOf() - moment(a.data.deliveryDate).valueOf();
      });
      return allSalesRecord.map((items, index) => {
        return (
          <View
            style={{
              flex: 1,
              flexDirection: 'row',
              marginVertical: 5,
              borderBottomWidth: 1,
              borderBottomColor: colors.lineColor,
            }}>
            <View style={{ flex: 0.77, justifyContent: 'center' }}>
              <Text style={{ fontWeight: '800' }}>{this.store.text.member + ": " + items.name}</Text>
              <Text style={{ fontWeight: '800' }}>{this.store.text.orderStatus + ": " + this.statusHandler(items.data.status)}</Text>
              <Text style={{ fontWeight: '800' }}>{this.store.text.shippingDate + ": " + moment(items.data.deliveryDate).format('DD/MM/YYYY')}</Text>
              {this.renderFreeShip(items.data)}
            </View>
            {/* <View
              style={{
                flex: 0.33,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text>{moment(items.date).format('DD/MM/YYYY hh:mm')}</Text>
            </View> */}
            <View
              style={{
                flex: 0.33,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              {this.data.hasOwnProperty('head') && this.data.head.id == this.store.loginUserData.data.id ? (<Text style={{ fontWeight: '800' }}>
                {this.store.priceHandler(items.data.totalPrice)}
              </Text>) : (<View />)}

            </View>
          </View>
        );
      });
    }
  }

  renderleaderOptionsButtons() {
    const buttons = [
      {
        id: 0,
        icon: 'gift-outline',
        name: this.store.text.redeemGifts,
      },
      {
        id: 1,
        icon: 'account-outline',
        name: this.store.text.manageMembers,
      },
      {
        id: 2,
        icon: 'file-document-outline',
        name: this.store.text.salesRecord,
      },
    ];
    if (this.data.hasOwnProperty('head') && this.data.head.id == this.store.loginUserData.data.id) {
      return buttons.map((item, index) => {
        return (
          <View
            style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <TouchableOpacity
              style={{
                backgroundColor: colors.shoppingGroupColor,
                width: 120,
                height: 40,
                borderRadius: 20,
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
              }}
              onPress={() => {
                const navigation = this.props.navigation;
                switch (item.id) {
                  case 0:
                    navigation.navigate('RedeemGifts');
                    break;
                  case 1:
                    navigation.navigate('ManageMembers', {
                      data: this.otherData.members,
                    });
                    break;
                  case 2:
                    // if (this.otherData != null) {
                    //   var allSalesRecord = [];
                    //   this.otherData.members.map((member, index) => {
                    //     member.orders.map((items, itemsIndex) => {
                    //       var data = items;
                    //       items.member = member;
                    //       allSalesRecord.push(data);
                    //     });
                    //   });
                    //   navigation.navigate('SalesRecord', {
                    //     data: allSalesRecord,
                    //   });
                    // }
                    this.goToSalesRecordPageAction();

                    break;
                }
              }}>
              <MaterialIcon name={item.icon} size={20} />
              <Text style={{ marginLeft: 3, fontSize: 13, fontWeight: '800' }}>
                {item.name}
              </Text>
            </TouchableOpacity>
          </View>
        );
      });
    }
  }

  renderInvateMember() {
    if (this.data.hasOwnProperty('head') && this.data.head.id == this.store.loginUserData.data.id) {
      return (
        <View
          style={{ width: width, alignItems: 'center', flexDirection: 'row', marginTop: 10 }}>
          <View style={{ height: 30, width: 200, borderWidth: 1, borderRadius: 5, marginLeft: 10 }}>
            <TextInput
              underlineColorAndroid="rgba(0,0,0,0)"
              style={{
                height: 30, width: 200, marginBottom: Platform.OS === 'ios' ? 3 : 0,
                paddingVertical: 0,
                marginLeft: 15,
              }}
              placeholder={this.store.text.membersPhoneNumber}
              value={this.phone}
              onChangeText={text => this.phone = text} />
          </View>

          <TouchableOpacity style={{ justifyContent: 'center', alignItems: 'center', height: 30, width: 100, borderRadius: 5, marginLeft: 10, backgroundColor: colors.mainColor }}
            onPress={() => { this.addMemberAction() }}>
            <Text style={{ color: 'white' }}>
              {this.store.text.addGroupMemeber}
            </Text>
          </TouchableOpacity>
        </View>

      )
    }
  }

  async goToSalesRecordPageAction() {
    const records = [
      {
        record: [],
      },
      {
        record: [],
      },
      {
        record: [],
      },
      {
        record: [],
      },
      {
        record: [],
      },
    ];

    const dateType = ['today', 'yesterday', 'this week', 'this month', 'all'];

    await this.otherData.members.map(async (member, index) => {
      await member.orders.map(async (items, itemsIndex) => {
        items.member = member.member;
        await dateType.forEach(async (dateItems, dateIndex) => {
          if (this.recordFilter(dateItems, items.created)) {
            await records[dateIndex].record.push(items);
          }
        });
      });
    });
    await console.log(records);
    await this.props.navigation.navigate('SalesRecord', {
      data: records,
    });
  }

  recordFilter(which, date) {
    switch (which) {
      case 'today':
        return moment().format('DDMMYYYY') == moment(date).format('DDMMYYYY');
        break;
      case 'yesterday':
        return (
          moment()
            .subtract(1, 'days')
            .format('DDMMYYYY') == moment(date).format('DDMMYYYY')
        );
        break;
      case 'this week':
        return moment(date).isSame(new Date(), 'week');
        break;
      case 'this month':
        return moment(date).isSame(new Date(), 'month');
        break;
      case 'all':
        return true;
        break;
    }
  }

  async joinAction() {
    if (this.store.loginUserData.data.hasOwnProperty('shoppingGroup')) {
      this.store.quitShoppingGroup(this);
    } else {

      this.introVisable = true

    }
  }

  headNameReturn() {
    if (this.data.hasOwnProperty('head')) {
      return this.data.head.name
    } else {
      return this.store.text.notExist
    }
  }

  renderJoinButton() {
    if (this.data.hasOwnProperty('head')) {
      if (this.data.head.id != this.store.loginUserData.data.id) {
        return (
          <TouchableOpacity
            style={{
              width: 60,
              height: 30,
              borderRadius: 30,
              backgroundColor: colors.mainColor,
              justifyContent: 'center',
              alignItems: 'center',
            }}
            onPress={() => {
              this.joinAction();
            }}>
            <Text style={{ color: 'white', fontWeight: '800' }}>
              {this.store.loginUserData.data.hasOwnProperty('shoppingGroup')
                ? this.store.text.leave
                : this.store.text.join}
            </Text>
          </TouchableOpacity>
        )
      }
    } else {
      return (
        <TouchableOpacity
          style={{
            width: 60,
            height: 30,
            borderRadius: 30,
            backgroundColor: colors.mainColor,
            justifyContent: 'center',
            alignItems: 'center',
          }}
          onPress={() => {
            this.joinAction();
          }}>
          <Text style={{ color: 'white', fontWeight: '800' }}>
            {this.store.loginUserData.data.hasOwnProperty('shoppingGroup')
              ? this.store.text.leave
              : this.store.text.join}
          </Text>
        </TouchableOpacity>
      )
    }

  }

  async handleShoppingGroupMemberDiscount() {
    var total = 0;
    await this.otherData.groupTargets.map(async (items, index) => {
      if (moment().format('YYYYMM') == items.month) {
        if (this.totalamount >= items.target) {
          total += items.memberPercentAdd
        }
      }
    })
    this.totalDiscount = total + this.data.memberBaseDiscountPercent
  }

  async join() {
    if (this.signCheck) {
      await this.store.joinShoppingGroup(this.data.id, this);
      this.introVisable = false
      this.findThisMonthTotalAmount()
    } else {
      //this.refs.toast.show(this.store.text.pleaseAgreeFirst)
      Alert.alert(
        '',
        this.store.text.pleaseAgreeFirst,
        [
          {
            text: this.store.text.sure,
            style: "cancel",
          },
        ],
        {
          cancelable: true,
          onDismiss: () => { }
        }
      );
    }
  }

  renderProgressBar() {

    if (!this.isRecommend) {
      return (
        <View
          style={{
            flex: 0.6,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          {this.otherData.groupTargets.map((items, index) => {
            console.log(items);
            if (moment().format('YYYYMM') == items.month) {
              return (
                <View style={{ marginTop: 10 }}>
                  <Text style={styles.labelText}>
                    {this.store.text.pointsGoal +
                      ' ' +
                      items.description +
                      '  ' +
                      this.totalamount +
                      ' / ' +
                      items.target}
                  </Text>
                  <Progress.Bar
                    style={{ marginTop: 5 }}
                    progress={this.totalamount / items.target}
                    width={(width - 40) * 0.6}
                    color={colors.mainColor}
                    unfilledColor={colors.lineColor}
                    borderWidth={0}
                  />
                  <View style={{ flexDirection: 'row', marginTop: 5 }}>
                    {/* <View style={{alignItems: 'flex-end', flex: 0.6}}>
                    <Text style={styles.labelText}>
                      {'+0.5%' + this.store.text.discount}
                    </Text>
                  </View> */}
                    <View style={{ alignItems: 'flex-end', flex: 0.4 }}>
                      <Text style={styles.labelText}>
                        {items.memberPercentAdd + '%' + this.store.text.discount}
                      </Text>
                    </View>
                  </View>
                </View>
              );
            }
          })}
        </View>
      );
    }
  }

  render() {
    return (
      <TouchableWithoutFeedback
        onPress={Keyboard.dismiss}
      >
        <MenuProvider
          style={{
            flex: 1,
            backgroundColor: colors.bgc,
          }}>
          <Loading loading={this.store.loading} />
          <View style={styles.naviBar}>
            <View style={[styles.barAreaView]}>
              <TouchableOpacity
                style={{
                  flex: 0.2,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
                onPress={() => {
                  if (this.store.loginUserData.data.hasOwnProperty('shoppingGroup')) {
                    this.props.navigation.navigate('Main')
                  } else {
                    this.props.navigation.goBack()
                  }
                }}>
                <Icon name="ios-arrow-back" color={'black'} size={40} />
              </TouchableOpacity>
              <View
                style={{
                  flex: 0.8,
                  justifyContent: 'center',
                }}>
                <Text style={{ fontSize: 22, fontWeight: '800' }}>
                  {this.data.name}
                </Text>
              </View>
              <View
                style={{
                  flex: 0.2,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}></View>
            </View>
          </View>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'center',
            }}>
            {this.renderleaderOptionsButtons()}
          </View>
          {this.renderInvateMember()}
          <ScrollView>
            <View style={{ alignItems: 'center' }}>
              <View style={styles.subView}>
                <Text style={{ fontSize: 22, fontWeight: '800' }}>
                  {this.data.name}
                </Text>
                <Text style={[styles.labelText, { marginTop: 5 }]}>
                  {this.otherData != null
                    ? this.store.text.numberOfMember +
                    ': ' +
                    this.otherData.members.length
                    : this.store.text.numberOfMember + ': --'}
                </Text>
                <View
                  style={{
                    marginTop: 10,
                    width: width - 40,
                    flexDirection: 'row',
                    alignItems: 'center',
                  }}>
                  <View style={{ flex: 0.8 }}>
                    <Text style={styles.labelText}>
                      {this.store.text.grpLeader + ': ' + this.headNameReturn()}
                    </Text>
                    {this.store.loginUserData.data.hasOwnProperty('shoppingGroup') ? (<TouchableOpacity
                      onPress={() => {
                        Linking.openURL(`tel:${this.data.mobile}`);
                      }}>
                      <Text style={[styles.labelText, { marginTop: 3 }]}>
                        {this.store.text.grpLeader +
                          this.store.text.mobilephone +
                          ': '}
                        <Text
                          style={[styles.labelText, { color: colors.mainColor }]}>
                          {this.data.mobile}
                        </Text>
                      </Text>
                    </TouchableOpacity>) : (<View
                    >
                      <Text style={[styles.labelText, { marginTop: 3 }]}>
                        {this.store.text.grpLeader +
                          this.store.text.mobilephone +
                          ': '}
                        <Text
                          style={[styles.labelText, { color: colors.mainColor }]}>
                          {"--"}
                        </Text>
                      </Text>
                    </View>)}
                    <Text
                      style={[styles.labelText]}>
                      {this.store.text.address + ": " + this.data.region.name + ', ' + this.data.district.name + ', ' + this.data.addr}
                    </Text>
                  </View>
                  <View style={{ flex: 0.2 }}>{this.renderJoinButton()}</View>
                </View>
              </View>
              <View
                style={{
                  height: 1,
                  width: width,
                  backgroundColor: colors.lineColor,
                  marginLeft: 40,
                  marginTop: 10,
                }}
              />
              <View style={styles.subView}>
                {/* <View style={{ width: width / 1.8 }}>
                <Text style={[styles.labelText, { color: 'black' }]}>
                  {'hihihihihi'}
                </Text>
              </View> */}
              </View>
              {/* <View style={styles.lineView} /> */}
              <View style={styles.subView}>
                <Text style={{ fontSize: 22, fontWeight: '800' }}>
                  {this.store.text.groupDiscount}
                </Text>
                <View
                  style={{
                    width: width - 40,
                    flexDirection: 'row',
                    marginTop: 20,
                  }}>
                  <View style={{ flex: 0.4, justifyContent: 'center' }}>
                    <Text style={{ fontSize: 35, fontWeight: '800' }}>
                      {this.store.loginUserData.data.hasOwnProperty('shoppingGroup') ? this.totalDiscount + '%' : this.data.memberBaseDiscountPercent + "%"}
                    </Text>
                  </View>
                  {this.renderProgressBar()}
                </View>
              </View>
              <View style={styles.lineView} />
              <View style={styles.subView}>
                <Text style={{ fontSize: 22, fontWeight: '800' }}>
                  {this.store.text.member + this.store.text.shoppingHistory}
                </Text>
                {this.renderMembers()}
              </View>
            </View>
          </ScrollView>
          <Modal isVisible={this.introVisable}
            deviceWidth={width}
            deviceHeight={height}>
            <View style={{ height: height * 0.8, backgroundColor: 'white', borderRadius: 20 }}>
              {/* <Text style = {{margin:20}}>
                {this.store.text.shoppingGroup}
              </Text> */}
              <View style={{ height: 50, alignItems: 'flex-end', justifyContent: 'center', }}>
                <TouchableOpacity style={{ marginRight: 20 }} onPress={() => this.introVisable = false}>
                  <MaterialIcon name='close' color={colors.mainColor} size={30} />
                </TouchableOpacity>

              </View>
              <ScrollView style={{ margin: 20 }}>


                <HTMLView
                  value={this.store.shoppingGroupIntro}

                  addLineBreaks={false}
                  paragraphBreak={false}
                  //stylesheet={{ fontSize: 10, marginTop: 0, fontSize: 14 ,}}
                  stylesheet={{

                    marginTop: 40,
                    br: { marginTop: -25, fontSize: 18 },
                    p: { marginTop: 0, fontSize: 15 }
                  }}
                />

              </ScrollView>
              <View style={{ flexDirection: 'row', margin: 20, alignItems: 'center' }}>
                <TouchableOpacity onPress={() => { this.signCheck = !this.signCheck }}>
                  <Icon name={this.signCheck ? 'checkbox-outline' : 'square-outline'} size={20} />
                </TouchableOpacity>
                <Text style={{ marginLeft: 10 }}>
                  {this.store.text.acceptShoppingGroup}
                </Text>
              </View>
              <TouchableOpacity style={{ height: 60, backgroundColor: colors.mainColor, borderBottomRightRadius: 20, borderBottomLeftRadius: 20, justifyContent: 'center', alignItems: 'center' }}
                onPress={() => {
                  this.join()
                }}>
                <Text style={{ fontSize: 20, color: 'white', fontWeight: '800' }}>
                  {this.store.text.join}
                </Text>
              </TouchableOpacity>
            </View>
          </Modal>


          <Toast
            ref="toast"
            style={{ backgroundColor: colors.mainColor }}
            position="bottom"
            positionValue={200}
            fadeInDuration={750}
            fadeOutDuration={2000}
            opacity={0.8}
            textStyle={{ color: 'white' }}
          />

        </MenuProvider>
      </TouchableWithoutFeedback>
    );
  }
}
const styles = StyleSheet.flatten({
  naviBar: {
    width,
    height: Platform.OS === 'ios' ? 70 : 75,
    backgroundColor: 'white',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: Platform.OS === 'ios' ? 0 : getStatusBarHeight(),
  },
  barAreaView: {
    flex: 1,
    marginRight: 20,
    marginLeft: 20,
    marginTop: Platform.OS === 'ios' ? -5 : 15,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },

  subView: {
    marginTop: 20,
    width: width - 40,
  },
  labelText: {
    color: colors.labelColor,
    fontSize: 12,
  },
  lineView: {
    height: 1,
    width: width - 40,
    backgroundColor: colors.lineColor,
    marginTop: 20,
  },
});
