//@ts-nocheck
import React, { useEffect, useRef, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { CommonActions, useNavigation } from '@react-navigation/native';
import {
  Alert,
  Linking,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  View,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { MText } from '../../components/MText';
import {
  Call,
  CheckBox,
  CheckBoxActive,
  CIMBBank,
  CloseIcon,
  Tick2,
  Tima3,
  WarningIcon,
} from '../../assets/icons';
import { color } from '../../theme';
import { Formik } from 'formik';
import MButton from '../../components/MButton';
import { commonStyles } from '../CommonStyles';
import * as yup from 'yup';
import FullSubmitStore from './store';
import Loading from '../../components/Loading';
import { ScreenNames } from '../../navigation';
import { formatDDMMYYY, formatMoney } from '../../utils';
import { save } from '../../utils/storage';
import { Api } from '../../services/api';

export const AcceptPolicy = observer(function AcceptPolicy(props: any) {
  const navigation = useNavigation();
  const ref = useRef<any>();
  const [BuyInsuranceOfCustomer, setBuyInsuranceOfCustomer] = useState(true);
  const [BuyInsuranceOfProperty, setBuyInsuranceOfProperty] = useState(true);
  const [BuyInsuranceHospital, setBuyInsuranceHospital] = useState(true);

  const [ruleCIMB, setRuleCIMB] = useState(true);
  const [ruleTima, setRuleTima] = useState(true);
  const [isLoading, setIsLoading] = useState(false);
  const [schedule, setSchedule] = useState<any[]>();
  const loan = props?.route?.params?.loan;
  const [data, setData] = useState<any>();

  useEffect(() => {
    FullSubmitStore.getInsurance(
      props?.route?.params?.isCimb ? { isCimb: true } : { isCimb: false },
      (res) => {
        setData(res);
      }
    );
  }, []);

  const onSubmit = () => {
    if (BuyInsuranceOfCustomer === false) {
      Alert.alert('Thông báo', 'Bảo hiểm sức khoẻ là bắt buộc', [
        {
          text: 'Đồng ý',
          onPress: () => {
            setBuyInsuranceOfCustomer(true);
          },
        },
      ]);
      return;
    }
    if (props?.route?.params?.isCimb) {
      if (!ruleCIMB || !ruleTima) {
        Alert.alert('Thông báo', 'Vui lòng đọc và tích chọn điều khoản');
        return;
      }
      Alert.alert(
        'Vui lòng xác nhận lại',
        `Số tài khoản nhận tiền của bạn là ${data?.bankAccountNumber} - ${data?.bankAccountName} - ${data?.bankName}`,
        [
          {
            text: 'Xác nhận',
            onPress: () => {
              const body = {
                FeeInsuranceOfCustomer: data?.feeInsuranceOfCustomer,
                // tái vay thì mặc định truyền true
                BuyInsuranceOfCustomer:
                  loan?.typeLoan === 2 ? true : BuyInsuranceOfCustomer,
                BuyInsuranceOfProperty:
                  loan?.typeLoan === 2 ? true : BuyInsuranceOfProperty,
                FeeInsuranceOfProperty: data?.feeInsuranceOfProperty,
              };
              setIsLoading(true);
              FullSubmitStore.confirmInsurance(body, () => {
                const key = `SHOW_${loan?.id}`;
                save(key, true);
                setIsLoading(false);
                navigation.dispatch(
                  CommonActions.reset({
                    index: 1,
                    routes: [{ name: ScreenNames.Main }],
                  })
                );
              });
            },
          },
          {
            text: 'Huỷ',
          },
        ]
      );
    } else {
      if (!ruleTima) {
        Alert.alert('Thông báo', 'Vui lòng đọc và tích chọn điều khoản');
        return;
      }
      Alert.alert(
        'Vui lòng xác nhận lại',
        `Số tài khoản nhận tiền của bạn là ${data?.bankAccountNumber} - ${data?.bankAccountName} - ${data?.bankName}`,
        [
          {
            text: 'Xác nhận',
            onPress: () => {
              const body = {
                FeeInsuranceOfCustomer: data?.feeInsuranceOfCustomer,
                // tái vay thì mặc định truyền true
                BuyInsuranceOfCustomer:
                  loan?.typeLoan === 2 ? true : BuyInsuranceOfCustomer,
                BuyInsuranceOfProperty:
                  loan?.typeLoan === 2 ? true : BuyInsuranceOfProperty,
                FeeInsuranceOfProperty: data?.feeInsuranceOfProperty,
                BuyInsuranceHospital: BuyInsuranceHospital,
                FeeInsuranceHospital: data?.feeInsuranceHospital,
              };
              setIsLoading(true);
              FullSubmitStore.confirmInsurance(body, () => {
                setIsLoading(false);
                const key = `SHOW_${loan?.id}`;
                save(key, true);
                navigation.dispatch(
                  CommonActions.reset({
                    index: 1,
                    routes: [{ name: ScreenNames.Main }],
                  })
                );
              });
            },
          },
          {
            text: 'Huỷ',
          },
        ]
      );
    }
  };

  const getSchedule = async () => {
    setIsLoading(true);
    try {
      const response = await Api.getInstance().getPaymentSchedule(loan?.id);
      console.log('lich', response);
      setIsLoading(false);
      if (response.kind === 'ok') {
        if (response.data.meta?.errorCode === 200) {
          setSchedule(response.data.data);
        } else {
          Alert.alert('Thông báo', response.data?.meta?.errorMessage);
        }
      } else {
        Alert.alert('Thông báo', 'Không lấy được lịch thanh toán!');
      }
    } catch (error) {
      setIsLoading(false);
      Alert.alert('Thông báo', 'Không lấy được lịch thanh toán!');
    }
  };

  useEffect(() => {
    getSchedule();
  }, []);
  return (
    <View style={{ flex: 1 }}>
      <LinearGradient colors={['#FF8E4F', '#EF592E']}>
        <SafeAreaView
          style={{
            flexDirection: 'row',
            paddingVertical: 10,
            alignItems: 'center',
          }}
        >
          <Tima3 />
          <View>
            <MText
              style={[
                commonStyles.textNormalBold,
                {
                  fontSize: 16,
                  color: 'white',
                },
              ]}
            >
              Kết quả đăng ký
            </MText>
            <MText style={{ fontSize: 14, color: 'white', flex: 1 }}>
              Bạn vui lòng đọc kỹ và xác nhận các mục dưới đây!
            </MText>
          </View>
        </SafeAreaView>
      </LinearGradient>
      <ScrollView ref={ref} style={{ padding: 16, flex: 1 }}>
        <TouchableOpacity
          onPress={() => ref.current.scrollToEnd()}
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            backgroundColor: '#EB5757',
            marginBottom: 16,
            padding: 16,
            borderRadius: 8,
          }}
        >
          <WarningIcon />
          <MText style={{ flex: 1, color: 'white', marginLeft: 8 }}>
            Vui lòng liên hệ tổng đài 1900633688 nếu số tài khoản không phải của
            bạn hoặc không còn sử dụng
          </MText>
        </TouchableOpacity>
        <View style={styles.box}>
          <View style={styles.row}>
            <MText style={{ color: '#828282', fontSize: 14 }}>Họ và tên</MText>
            <MText style={{ fontWeight: 'bold', fontSize: 14 }}>
              {data?.fullName}
            </MText>
          </View>
          <View style={[styles.row, { marginTop: 8 }]}>
            <MText style={{ color: '#828282', fontSize: 14 }}>Ngày sinh</MText>
            <MText style={{ fontWeight: 'bold', fontSize: 14 }}>
              {formatDDMMYYY(data?.dob)}
            </MText>
          </View>
          <View style={[styles.row, { marginTop: 8 }]}>
            <MText style={{ color: '#828282', fontSize: 14 }}>
              Số CMND/ CCCD
            </MText>
            <MText style={{ fontWeight: 'bold', fontSize: 14 }}>
              {data?.nationalId}
            </MText>
          </View>
          <View style={[styles.row, { marginTop: 8 }]}>
            <MText style={{ color: '#828282', fontSize: 14 }}>
              Ngày cấp CMND/ CCCD
            </MText>
            <MText style={{ fontWeight: 'bold', fontSize: 14 }}>
              {formatDDMMYYY(data?.dateNational)}
            </MText>
          </View>
        </View>
        <View style={[styles.box, { marginTop: 8 }]}>
          <View style={styles.row}>
            <MText style={{ color: '#828282', fontSize: 14 }}>
              Tổng khoản vay
            </MText>
            <MText
              style={{ fontWeight: 'bold', fontSize: 14, color: color.primary }}
            >
              {formatMoney(data?.loanAmount)}đ
            </MText>
          </View>
          <View style={[styles.row, { marginTop: 8 }]}>
            <MText style={{ color: '#828282', fontSize: 14 }}>
              Thời hạn vay
            </MText>
            <MText style={{ fontWeight: 'bold', fontSize: 14 }}>
              {data?.loanTime} tháng
            </MText>
          </View>
          <View style={[styles.row, { marginTop: 8 }]}>
            <MText style={{ color: '#828282', fontSize: 14 }}>Lãi suất</MText>
            <MText style={{ fontWeight: 'bold', fontSize: 14 }}>
              {data?.rate}%/ năm
            </MText>
          </View>
          <View
            style={{
              backgroundColor: color.border,
              height: 1,
              marginTop: 8,
            }}
          />
          {schedule?.map((item, index) => (
            <View key={index}>
              <View style={[styles.row, { marginTop: 8 }]}>
                <MText style={{ color: '#828282', fontSize: 14 }}>
                  Ngày thanh toán (dự kiến)
                </MText>
                <MText style={{ fontWeight: 'bold', fontSize: 14 }}>
                  {formatDDMMYYY(item?.toDate)}
                </MText>
              </View>
              <View style={[styles.row, { marginTop: 8 }]}>
                <MText style={{ color: '#828282', fontSize: 14 }}>
                  Thanh toán hàng tháng (dự kiến)
                </MText>
                <MText style={{ fontWeight: 'bold', fontSize: 14 }}>
                  {formatMoney(
                    item?.moneyOriginal +
                      item?.moneyInterest +
                      item?.moneyConsultant +
                      item?.moneyService
                  )}
                </MText>
              </View>
              <View
                style={{
                  backgroundColor: color.border,
                  height: 1,
                  marginTop: 8,
                }}
              />
            </View>
          ))}
        </View>
        <View style={[styles.box, { marginTop: 8 }]}>
          <MText style={{ color: color.primary, fontWeight: 'bold' }}>
            Tài khoản người nhận
          </MText>
          <View style={[styles.row, { marginTop: 8 }]}>
            <MText style={{ color: '#828282', fontSize: 14 }}>Ngân hàng</MText>
            <MText style={{ fontWeight: 'bold', fontSize: 14 }}>
              {data?.bankName}
            </MText>
          </View>
          <View
            style={{
              backgroundColor: '#FFF3E9',
              borderRadius: 4,
              marginHorizontal: -8,
              marginTop: 8,
              paddingHorizontal: 8,
            }}
          >
            <View style={[styles.row, { marginTop: 8 }]}>
              <MText style={{ color: '#828282', fontSize: 14 }}>
                Tên tài khoản
              </MText>
              <MText style={{ fontWeight: 'bold', fontSize: 14 }}>
                {data?.bankAccountName}
              </MText>
            </View>
            <View style={[styles.row, { marginTop: 8 }]}>
              <MText style={{ color: '#828282', fontSize: 14 }}>
                Số tài khoản
              </MText>
              <MText style={{ fontWeight: 'bold', fontSize: 14 }}>
                {data?.bankAccountNumber}
              </MText>
            </View>
            <TouchableOpacity
              style={{ marginTop: 8 }}
              onPress={() => {
                Linking.openURL(`tel:1900633688`);
              }}
            >
              <MText
                style={{
                  color: '#828282',
                  fontSize: 14,
                  marginBottom: 8,
                  alignItems: 'center',
                }}
              >
                (Vui lòng liên hệ tổng đài{' '}
                <MText
                  style={{
                    color: color.primary,
                    fontSize: 14,
                    fontWeight: 'bold',
                  }}
                >
                  1900633688
                </MText>{' '}
                nếu số tài khoản trên không phải của bạn hoặc không còn sử dụng)
              </MText>
            </TouchableOpacity>
          </View>
          <View style={[styles.row, { marginTop: 8 }]}>
            <MText style={{ color: '#828282', fontSize: 14 }}>
              Số tiền thực nhận (Trừ phí)
            </MText>

            {BuyInsuranceOfCustomer &&
              BuyInsuranceOfProperty &&
              BuyInsuranceHospital && (
                <MText
                  style={{
                    fontWeight: 'bold',
                    fontSize: 14,
                    color: color.primary,
                  }}
                >
                  {formatMoney(data?.loanAmount)}
                </MText>
              )}
            {!BuyInsuranceOfCustomer &&
              BuyInsuranceOfProperty &&
              BuyInsuranceHospital && (
                <MText
                  style={{
                    fontWeight: 'bold',
                    fontSize: 14,
                    color: color.primary,
                  }}
                >
                  {formatMoney(data?.loanAmount - data?.feeInsuranceOfCustomer)}
                </MText>
              )}
            {BuyInsuranceOfCustomer &&
              BuyInsuranceOfProperty &&
              !BuyInsuranceHospital && (
                <MText
                  style={{
                    fontWeight: 'bold',
                    fontSize: 14,
                    color: color.primary,
                  }}
                >
                  {formatMoney(data?.loanAmount - data?.feeInsuranceHospital)}
                </MText>
              )}
            {BuyInsuranceOfCustomer &&
              !BuyInsuranceOfProperty &&
              BuyInsuranceHospital && (
                <MText
                  style={{
                    fontWeight: 'bold',
                    fontSize: 14,
                    color: color.primary,
                  }}
                >
                  {formatMoney(data?.loanAmount - data?.feeInsuranceOfProperty)}
                </MText>
              )}
            {!BuyInsuranceOfCustomer &&
              !BuyInsuranceOfProperty &&
              BuyInsuranceHospital && (
                <MText
                  style={{
                    fontWeight: 'bold',
                    fontSize: 14,
                    color: color.primary,
                  }}
                >
                  {formatMoney(
                    data?.loanAmount -
                      data?.feeInsuranceOfProperty -
                      data?.feeInsuranceOfCustomer
                  )}
                </MText>
              )}
            {!BuyInsuranceOfCustomer &&
              BuyInsuranceOfProperty &&
              !BuyInsuranceHospital && (
                <MText
                  style={{
                    fontWeight: 'bold',
                    fontSize: 14,
                    color: color.primary,
                  }}
                >
                  {formatMoney(
                    data?.loanAmount -
                      data?.feeInsuranceOfCustomer -
                      data?.feeInsuranceHospital
                  )}
                </MText>
              )}
            {BuyInsuranceOfCustomer &&
              !BuyInsuranceOfProperty &&
              !BuyInsuranceHospital && (
                <MText
                  style={{
                    fontWeight: 'bold',
                    fontSize: 14,
                    color: color.primary,
                  }}
                >
                  {formatMoney(
                    data?.loanAmount -
                      data?.feeInsuranceOfProperty -
                      data?.feeInsuranceHospital
                  )}
                </MText>
              )}
            {!BuyInsuranceOfCustomer &&
              !BuyInsuranceOfProperty &&
              !BuyInsuranceHospital && (
                <MText
                  style={{
                    fontWeight: 'bold',
                    fontSize: 14,
                    color: color.primary,
                  }}
                >
                  {formatMoney(
                    data?.loanAmount -
                      data?.feeInsuranceOfProperty -
                      data?.feeInsuranceHospital -
                      data?.feeInsuranceOfCustomer
                  )}
                </MText>
              )}
          </View>
        </View>
        <View style={[styles.box, { marginTop: 8 }]}>
          <MText style={{ color: color.primary, fontWeight: 'bold' }}>
            Phí khác
          </MText>
          <View
            style={{
              marginTop: 8,
              flexDirection: 'row',
              justifyContent: 'space-between',
            }}
          >
            <TouchableOpacity
              style={{
                flexDirection: 'row',
                alignItems: 'center',
              }}
              onPress={() => {
                setBuyInsuranceOfCustomer(!BuyInsuranceOfCustomer);
              }}
            >
              {BuyInsuranceOfCustomer ? <CheckBoxActive /> : <CheckBox />}

              <MText style={{ color: '#828282', marginLeft: 5, fontSize: 14 }}>
                Phí BH Sức khoẻ
              </MText>
            </TouchableOpacity>
            <MText style={{ fontSize: 14, fontWeight: 'bold' }}>
              {formatMoney(data?.feeInsuranceOfCustomer)}đ
            </MText>
          </View>
          <View
            style={{
              marginTop: 8,
              flexDirection: 'row',
              justifyContent: 'space-between',
            }}
          >
            <TouchableOpacity
              style={{
                flexDirection: 'row',
                alignItems: 'center',
              }}
              onPress={() => {
                setBuyInsuranceOfProperty(!BuyInsuranceOfProperty);
              }}
            >
              {BuyInsuranceOfProperty ? <CheckBoxActive /> : <CheckBox />}
              <MText style={{ color: '#828282', marginLeft: 5, fontSize: 14 }}>
                Phí BH vật chất
              </MText>
            </TouchableOpacity>
            <MText style={{ fontSize: 14, fontWeight: 'bold' }}>
              {formatMoney(data?.feeInsuranceOfProperty)}đ
            </MText>
          </View>
          <View
            style={{
              marginTop: 8,
              flexDirection: 'row',
              justifyContent: 'space-between',
            }}
          >
            <TouchableOpacity
              style={{
                flexDirection: 'row',
                alignItems: 'center',
              }}
              onPress={() => {
                setBuyInsuranceHospital(!BuyInsuranceHospital);
              }}
            >
              {BuyInsuranceHospital ? <CheckBoxActive /> : <CheckBox />}
              <MText style={{ color: '#828282', marginLeft: 5, fontSize: 14 }}>
                Phí BH nằm viện
              </MText>
            </TouchableOpacity>
            <MText style={{ fontSize: 14, fontWeight: 'bold' }}>
              {formatMoney(data?.feeInsuranceHospital)}đ
            </MText>
          </View>
          <View
            style={{
              height: 2,
              backgroundColor: '#BDBDBD',
              marginVertical: 8,
            }}
          />
          <View>
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <Tick2 />
              <MText style={{ color: '#828282', fontSize: 10 }}>
                Quyền lợi
              </MText>
              <View>
                <MText
                  style={{
                    color: '#828282',
                    // color: '#2F80ED',
                    fontSize: 10,
                    // textDecorationLine: 'underline',
                  }}
                >
                  {' '}
                  bảo hiểm sức khoẻ{' '}
                </MText>
              </View>
              <MText style={{ color: '#828282', fontSize: 10 }}>
                lên tới 100% từ Bảo Minh
              </MText>
            </View>
            <MText style={{ color: '#828282', fontSize: 10 }}>
              (Tai nạn, thương tật,...)
            </MText>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 5,
              }}
            >
              <Tick2 />
              <MText style={{ color: '#828282', fontSize: 10 }}>
                Quyền lợi
              </MText>
              <View>
                <MText
                  style={{
                    color: '#828282',
                    // color: '#2F80ED',
                    fontSize: 10,
                    // textDecorationLine: 'underline',
                  }}
                >
                  {' '}
                  bảo hiểm vật chất{' '}
                </MText>
              </View>
              <MText style={{ color: '#828282', fontSize: 10 }}>
                100% từ Bảo Minh
              </MText>
            </View>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 5,
              }}
            >
              <Tick2 />
              <MText style={{ color: '#828282', fontSize: 10 }}>
                Quyền lợi
              </MText>
              <View>
                <MText
                  style={{
                    color: '#828282',
                    // color: '#2F80ED',
                    fontSize: 10,
                    // textDecorationLine: 'underline',
                  }}
                >
                  {' '}
                  bảo hiểm nằm viện{' '}
                </MText>
              </View>
              <MText style={{ color: '#828282', fontSize: 10 }}>
                100% từ Bảo Minh
              </MText>
            </View>
          </View>
        </View>
        <View style={{ marginTop: 16, marginBottom: 24 }}>
          <MText style={{ fontWeight: 'bold' }}>Điều kiện và điều khoản:</MText>
          {props?.route?.params?.isCimb ? (
            <View style={{ flexDirection: 'row', marginTop: 8 }}>
              <TouchableOpacity onPress={() => setRuleCIMB(!ruleCIMB)}>
                {ruleCIMB ? <CheckBoxActive /> : <CheckBox />}
              </TouchableOpacity>
              <View style={{ marginLeft: 5 }}>
                <View style={{ flexDirection: 'row' }}>
                  <MText style={{ fontSize: 14 }}>Tôi chấp nhận </MText>
                  <TouchableOpacity
                    onPress={() => {
                      navigation.push(ScreenNames.QuickTerm, {
                        fullSubmit: true,
                      });
                    }}
                  >
                    <MText
                      style={{
                        color: '#2F80ED',
                        fontSize: 14,
                        textDecorationLine: 'underline',
                      }}
                    >
                      điều kiện và điều khoản của hợp
                    </MText>
                  </TouchableOpacity>
                </View>
                <TouchableOpacity
                  onPress={() => {
                    navigation.push(ScreenNames.QuickTerm, {
                      fullSubmit: true,
                    });
                  }}
                >
                  <MText
                    style={{
                      color: '#2F80ED',
                      fontSize: 14,
                      textDecorationLine: 'underline',
                    }}
                  >
                    đồng với CIMB
                  </MText>
                </TouchableOpacity>
              </View>
            </View>
          ) : (
            <View />
          )}
          <View style={{ flexDirection: 'row', marginTop: 8 }}>
            <TouchableOpacity onPress={() => setRuleTima(!ruleTima)}>
              {ruleTima ? <CheckBoxActive /> : <CheckBox />}
            </TouchableOpacity>
            <View style={{ marginLeft: 5 }}>
              <View style={{ flexDirection: 'row' }}>
                <MText style={{ fontSize: 14 }}>Tôi đã hiểu và xác nhận </MText>
                <TouchableOpacity
                  onPress={() => {
                    Linking.openURL('https://tima.vn/tracuu');
                  }}
                >
                  <MText
                    style={{
                      color: '#2F80ED',
                      fontSize: 14,
                      textDecorationLine: 'underline',
                    }}
                  >
                    bảng tính lãi phí
                  </MText>
                </TouchableOpacity>
                <MText style={{ fontSize: 14 }}> đúng với sản</MText>
              </View>
              <MText style={{ fontSize: 14 }}>phẩm do Tima cung cấp</MText>
            </View>
          </View>
        </View>
      </ScrollView>
      <View>
        <MButton
          style={{ paddingHorizontal: 16 }}
          disable={
            loan?.typeLoan === 2 &&
            !BuyInsuranceOfCustomer &&
            !BuyInsuranceOfProperty
              ? true
              : false
          }
          onPress={() => onSubmit()}
        >
          <LinearGradient
            colors={
              loan?.typeLoan === 2 &&
              !BuyInsuranceOfCustomer &&
              !BuyInsuranceOfProperty
                ? ['#BDBDBD', '#BDBDBD']
                : ['#FF7A00', '#EF4123']
            }
            style={[
              commonStyles.alignCenter,
              commonStyles.justifyCenter,
              {
                height: 40,
                borderRadius: 30,
                marginTop: 20,
              },
            ]}
          >
            <MText
              style={[
                commonStyles.textNormalBold,
                {
                  color:
                    loan?.typeLoan === 2 &&
                    !BuyInsuranceOfCustomer &&
                    !BuyInsuranceOfProperty
                      ? '#333333'
                      : 'white',
                },
              ]}
            >
              Hoàn thành
            </MText>
          </LinearGradient>
        </MButton>
        <View
          style={{
            marginBottom: 24,
            marginTop: 8,
            flexDirection: 'row',
            justifyContent: 'center',
          }}
        >
          <MText style={{ fontSize: 14, color: '#333333' }}>
            Cung cấp bởi{' '}
          </MText>
          <CIMBBank />
        </View>
      </View>
      <Loading isLoading={isLoading} />
    </View>
  );
});
const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  box: {
    backgroundColor: 'white',
    borderRadius: 8,
    padding: 16,
    borderLeftWidth: 2,
    borderLeftColor: color.primary,
  },
});
