import React, { useState, useEffect, useRef } from 'react';
import Container from '../components/container';
import { useRoute } from '@react-navigation/native';
import { globalStyles, customStyles, GetPageTheme } from "../styles/Global";
import {
   View, Text, ScrollView, TouchableOpacity,
   Image, StyleSheet, Platform, Alert, Dimensions
} from 'react-native';
import { connect } from 'react-redux';
import moment from 'moment';
import { get_item } from '../components/localStorage';
import { notify } from '../components/notify';
import CustomHeader from '../components/customHeader';
import CustomLoader from '../components/CustomLoader';
import CustomDropdown from '../components/CustomDropdown';
import ModalSelector from 'react-native-modal-selector';
import { getMethodName, METHODS } from '../constants/methodNames';
import { mapStateToProps, mapDispatchToProps } from '../reducers/contextProvider';
import ImageViewer from 'react-native-image-zoom-viewer';

// ---------------- Sample Fallback Data ----------------
const sampleData = [
   {
      EmployeeName: "John Doe (Promoter)",
      GroomingImages: [
         { id: 1, ImageUrl: "https://portraitpal.ai/wp-content/uploads/2024/10/Linkedin-headshot.jpg" },
         { id: 2, ImageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMV9sXUMHZufycMbYSk6IN6u_pnRIADzH2m5E1tnewdd0jk0ltjqFsqSCooqjaa-fNAQQ&usqp=CAU" },
      ],
   },
   {
      EmployeeName: "Alice Smith (Merchandiser)",
      GroomingImages: [
         { id: 1, ImageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTxctjU21pUENIsGN1F4qY21P7GfdEbhTMp2g&s" },
      ],
   },
];

const GroomingPictures = (props) => {
   const route = useRoute();
   const modalRefs = useRef({});
   const ST = props.StaticText || {};
   const PageTheme = GetPageTheme(props.DarkMode, route.name);
   const [loginData, setLoginData] = useState({});

   const [processing, setProcessing] = useState(true);
   const [grromingImages, setGroomingImages] = useState([]);
   const [supervisor, setSupervisor] = useState("");
   const [date, setDate] = useState('');
   const [supervisorList, setSupervisorList] = useState([]);
   const [groomingReason, setGroomingReason] = useState([]);

   const [statuses, setStatuses] = useState({}); // {index: "Aprooved" | "Reject" | null}
   const [selectedReasons, setSelectedReasons] = useState({}); // {index: reasonText}
   const [activeRejectIndex, setActiveRejectIndex] = useState(null);
   const [dates, setDates] = useState([]);
   const [RejectedItem, setRejectedItem] = useState({})


   const [showZoom, setShowZoom] = useState(false);
   const [zoomImages, setZoomImages] = useState([]);
   const [zoomIndex, setZoomIndex] = useState(0);
   const zoomRef = useRef(null);
   const [imageHeights, setImageHeights] = useState({});

   useEffect(() => {
      setProcessing(false);
      getLoginData();
   }, []);

   useEffect(() => {
      downloadGroomingImageAudit();
      getNonGroomingAuditReason();
      getDateCount();
   }, []);




   const openGroomingZoom = (images, activeIndex = 0) => {
      const formattedImages = images.map(img => ({
         url: img.ImageUrl,
      }));

      setZoomImages(formattedImages);
      setShowZoom(true);
      setZoomIndex(activeIndex);

      // Optional: jump to tapped image
      // setTimeout(() => {
      //    zoomRef.current?.jumpTo(activeIndex);
      // }, 200);
   };


   const getLoginData = async () => {
      const loginInfo = await get_item('loginInfo');
      const loginDetails = JSON.parse(loginInfo);
      setLoginData(loginDetails);
   }

   const downloadGroomingImageAudit = async () => {
      try {
         setProcessing(true)
         let d1 = new Date();
         let formatedDate = moment(d1).format('MM/DD/YYYY');
         const loginInfo = await get_item('loginInfo');
         const loginDetails = JSON.parse(loginInfo);
         const url = `${props.baseurl}${getMethodName(METHODS.DOWNLOADJSON_METHOD)}`;

         if (loginDetails?.Designation != 'Supervisor') {
            getSupervisorList();
         }
         const payload = {
            Downloadtype: "Sup_GroomingImageAudit",
            Username: loginDetails?.UserId || '',
            Param1: supervisor,
            Param2: date,
         };
         console.log('Download Request:', url, payload);
         fetch(url, {
            method: "POST",
            headers: {
               "Content-Type": "application/json"
            },
            body: JSON.stringify(payload)
         })
            .then(async (response) => {
               if (!response.ok) {
                  throw new Error(`HTTP error! status: ${response.status}`);
               }
               const result = await response.json();
               let res = JSON.parse(result)
               let grooming = res?.Sup_GroomingImageAudit
               setGroomingImages(grooming);
               setProcessing(false)

               // console.log('API CALLED =----------->', JSON.stringify(grooming));
            })
            .catch((error) => {
               console.error("Error:", error);
               setProcessing(false)

            });

      } catch (error) {
         console.error('Error downloading grooming list:', error);
         notify("Cannot download grooming list data!");
         setProcessing(false);
         return [];
      }
   }

   const getSupervisorList = async () => {
      try {
         let d1 = new Date();
         let formatedDate = moment(d1).format('MM/DD/YYYY');
         const loginInfo = await get_item('loginInfo');
         const loginDetails = JSON.parse(loginInfo);
         const url = `${props.baseurl}${getMethodName(METHODS.DOWNLOADJSON_METHOD)}`;
         const payload = {
            Downloadtype: "Sup_TeamList",
            Username: loginDetails?.UserId || '',
            Param1: 0,
            Param2: formatedDate,
         };
         console.log('Download Request:', url, payload);
         fetch(url, {
            method: "POST",
            headers: {
               "Content-Type": "application/json"
            },
            body: JSON.stringify(payload)
         })
            .then(async (response) => {
               if (!response.ok) {
                  throw new Error(`HTTP error! status: ${response.status}`);
               }
               const result = await response.json();
               let res = JSON.parse(result)
               let supList = Array.isArray(res?.Sup_TeamList) ? res.Sup_TeamList : [];
               // console.log('supListsupList--->', supList);
               let tempData = supList.map(ele => ({
                  label: ele.EmployeeName,
                  value: ele.EmpId
               }));
               setSupervisorList(tempData)
            })
            .catch((error) => {
               console.error("Error:", error);
            });
      } catch (error) {
         console.error('Error downloading grooming list:', error);
         notify("Cannot download grooming list data!");
         setProcessing(false);
         return [];
      }
   }

   const getNonGroomingAuditReason = async () => {
      try {
         let d1 = new Date();
         let formatedDate = moment(d1).format('MM/DD/YYYY');
         const loginInfo = await get_item('loginInfo');
         const loginDetails = JSON.parse(loginInfo);
         const url = `${props.baseurl}${getMethodName(METHODS.DOWNLOADJSON_METHOD)}`;

         const payload = {
            Downloadtype: "Sup_Master_NonGroomingAuditReason",
            Username: loginDetails?.UserId || '',
            Param1: 0,
            Param2: formatedDate,
         };
         console.log('Download Request:', url, payload);
         fetch(url, {
            method: "POST",
            headers: {
               "Content-Type": "application/json"
            },
            body: JSON.stringify(payload)
         })
            .then(async (response) => {
               if (!response.ok) {
                  throw new Error(`HTTP error! status: ${response.status}`);
               }
               const result = await response.json();
               let res = JSON.parse(result)
               let groomingReason = res?.Sup_Master_NonGroomingAuditReason;
               setGroomingReason(groomingReason)

            })
            .catch((error) => {
               console.error("Error:", error);
            });

      } catch (error) {
         console.error('Error downloading grooming list:', error);
         notify("Cannot download grooming list data!");
         setProcessing(false);
         return [];
      }
   }

   const getDateCount = async () => {
      try {
         let d1 = new Date();
         let formatedDate = moment(d1).format('MM/DD/YYYY');
         const loginInfo = await get_item('loginInfo');
         const loginDetails = JSON.parse(loginInfo);
         const url = `${props.baseurl}${getMethodName(METHODS.DOWNLOADJSON_METHOD)}`;
         const payload = {
            Downloadtype: "Mapping_MenuConfiguration_Sup",
            Username: loginDetails?.UserId || '',
            Param1: 0,
            Param2: formatedDate,
         };
         console.log('Download Request:', url, payload);

         const response = await fetch(url, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload)
         });

         if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
         }
         const result = await response.json();
         let res = JSON.parse(result);
         const groomingFilterDate = res.Mapping_MenuConfiguration_Sup.find(
            (item) => item.KPIFieldName === "GroomingAuditDateFilterDays"
         );
         if (groomingFilterDate?.KPIFieldEnable === true || groomingFilterDate?.KPIFieldEnable === 'true') {
            const count = parseInt(groomingFilterDate.KPIFieldDisplayName, 10);

            // ✅ Generate last N dates from today (Descending Order)
            const today = moment();
            const dateArray = [];

            for (let i = 0; i < count; i++) {
               const pastDate = moment(today).subtract(i, 'days');
               dateArray.push({
                  label: pastDate.format('DD MMM YYYY'),
                  value: pastDate.format('MM/DD/YYYY'),
               });
            }

            // ✅ Keep descending (today → older) and default to today
            setDates(dateArray);
            setDate(dateArray[0]?.value || '');
         }

         // setGroomingFilterDate(groomingFilterDate);
      } catch (error) {
         console.error('Error downloading grooming list:', error);
         setProcessing(false);
      }
   };

   const handleApprove = async (index, item) => {
      setProcessing(true)
      const loginInfo = await get_item('loginInfo');
      const loginDetails = JSON.parse(loginInfo);
      let postData = [{
         "UserId": loginDetails?.UserId || '',
         "TId": item?.TId,
         "AuditStatus": "Aprooved",
         "ReasonId": 0
      }]

      let payload = {
         "MID": 0,
         "Keys": "GroomingPicturesAudit",
         "JsonData": JSON.stringify(postData),
         "UserId": loginDetails?.UserId || '',
      }
      const url = `${props.baseurl}${getMethodName(METHODS.UPLOAD_JSON_DIRECT)}`;
      console.log('url, payload ---->', url, payload);

      const response = await fetch(url, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(payload)
      });
      if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
      }

      const result = await response.json();
      let res = typeof result === 'string' ? JSON.parse(result) : result;
      console.log('UPLOAD_JSON_DIRECT --', res);
      if (res?.UploadJsonDirectResult == "Success" || res?.UploadJsonDirectResult?.MID == "Success") {
         // Alert.alert('', JSON.stringify(res,))
         setProcessing(false)
         setStatuses(prev => ({ ...prev, [index]: 'Aprooved' }));
         setSelectedReasons(prev => ({ ...prev, [index]: null }));
         notify('Approved Successfully')
      } else {
         setProcessing(false)
      }
   };

   const handleReject = (index, item) => {
      setRejectedItem(item);
      setActiveRejectIndex(index);
      setTimeout(() => modalRefs.current[index]?.open(), 100);
   };

   const handleSelectReason = async (index, option) => {
      setProcessing(true)
      const loginInfo = await get_item('loginInfo');
      const loginDetails = JSON.parse(loginInfo);
      let postData = [{
         "UserId": loginDetails?.UserId || '',
         "TId": RejectedItem?.TId,
         "AuditStatus": "Reject",
         "ReasonId": option?.ReasonId
      }]

      let payload = {
         "MID": 0,
         "Keys": "GroomingPicturesAudit",
         "JsonData": JSON.stringify(postData),
         "UserId": loginDetails?.UserId || '',
      }
      const url = `${props.baseurl}${getMethodName(METHODS.UPLOAD_JSON_DIRECT)}`;

      console.log('url, payload ---->', url, payload);
      const response = await fetch(url, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(payload)
      });
      if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
      }
      // setProcessing(false)
      // return


      const result = await response.json();
      let res = typeof result === 'string' ? JSON.parse(result) : result;
      console.log('Reject wala -->', res);
      if (res?.UploadJsonDirectResult == "Success" || res?.UploadJsonDirectResult?.MID == "Success") {
         setStatuses(prev => ({ ...prev, [index]: 'Reject' }));
         setSelectedReasons(prev => ({ ...prev, [index]: option.Reason }));
         setActiveRejectIndex(null);
         setProcessing(false)
      } else {
         setProcessing(false)
      }
      setProcessing(false)
   };

   const handleReset = async (index, item) => {
      setProcessing(true)
      const loginInfo = await get_item('loginInfo');
      const loginDetails = JSON.parse(loginInfo);
      let postData = [{
         "UserId": loginDetails?.UserId || '',
         "TId": item?.TId,
         "AuditStatus": "Pending",
         "ReasonId": 0
      }]

      let payload = {
         "MID": 0,
         "Keys": "GroomingPicturesAudit",
         "JsonData": JSON.stringify(postData),
         "UserId": loginDetails?.UserId || '',
      }
      const url = `${props.baseurl}${getMethodName(METHODS.UPLOAD_JSON_DIRECT)}`;

      console.log('url, payload ---->', url, payload);
      const response = await fetch(url, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(payload)
      });
      if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
      }

      const result = await response.json();
      let res = typeof result === 'string' ? JSON.parse(result) : result;
      if (res?.UploadJsonDirectResult == "Success" || res?.UploadJsonDirectResult?.MID == "Success") {
         setStatuses(prev => ({ ...prev, [index]: null }));
         setSelectedReasons(prev => ({ ...prev, [index]: null }));
         setProcessing(false)

      } else {
         Alert.alert('Alert', `${res}`)
         setProcessing(false)
      }
   };

   const onClickGo = async () => {
      try {
         let d1 = new Date();
         let formatedDate = moment(d1).format('MM/DD/YYYY');
         const url = `${props.baseurl}${getMethodName(METHODS.DOWNLOADJSON_METHOD)}`;
         const payload = {
            Downloadtype: "Sup_GroomingImageAudit",
            Username: loginData?.UserId || '',
            Param1: supervisor,
            Param2: date,
         };
         console.log('Download Request:--------->', url, payload);

         if (loginData?.Designation !== 'Supervisor') {
            if (!supervisor || supervisor == "undefined" || supervisor == null) {
               notify('Please Select Supervisor')
               return
            }
         }
         fetch(url, {
            method: "POST",
            headers: {
               "Content-Type": "application/json"
            },
            body: JSON.stringify(payload)
         })
            .then(async (response) => {
               if (!response.ok) {
                  throw new Error(`HTTP error! status: ${response.status}`);
               }
               const result = await response.json();
               let res = JSON.parse(result)
               let grooming = res?.Sup_GroomingImageAudit
               setGroomingImages(grooming);
               setProcessing(false);
               // console.log('API CALLED =----------->', JSON.stringify(grooming));
            })
            .catch((error) => {
               console.error("Error:", error);
            });

      } catch (error) {
         console.error('Error downloading grooming list:', error);
         setProcessing(false);
         return [];
      }
   };

   //CONSOLE LOG ================================*

   // console.log('loginData?.Designation=============>', loginData?.Designation);
   // console.log('loginDataloginDataloginData----->', loginData?.UserId);
   // console.log('grromingImages---------->', grromingImages);
   // console.log('PageTheme---------->', PageTheme);


   //=========================================*

   return (
      <Container {...props} pt={0} avoidSafeArea={(Platform.OS === 'ios')}>
         {processing && <CustomLoader title={ST.Loading + "..."} />}
         <CustomHeader {...props} title={'Grooming Image Audit'} hideTimer={false} />
         <View style={{ flex: 1 }}>
            <ScrollView style={styles.scrollView} contentContainerStyle={styles.content}>
               {/* Filters */}


               {/* {grromingImages && grromingImages.length > 0 ? */}
               <>
                  <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>

                     {loginData?.Designation === "Supervisor" ?
                        <View style={styles.supDropDown}>
                           <Text style={{ color: '#000', fontWeight: '500', fontSize: 14 }}>{loginData?.UserId}</Text>
                        </View>
                        :

                        <View style={{ width: '48%', }}>
                           <CustomDropdown
                              data={supervisorList}
                              value={supervisor}
                              placeholder='Select Supervisor'
                              onChange={item => setSupervisor(item.value)}
                              containerStyle={styles.yearDropDown}
                           />
                        </View>
                     }


                     <View style={{ width: '48%' }}>
                        <CustomDropdown
                           data={dates}
                           value={`${date}`}
                           placeholder='Select Date'
                           onChange={item => setDate(item.value)}
                           containerStyle={styles.yearDropDown}
                        />
                     </View>
                  </View>

                  <View style={{ marginTop: 10, alignSelf: 'center' }}>
                     <TouchableOpacity onPress={() => onClickGo()} style={styles.goButton}>
                        <Text style={styles.goButtonText}>Go</Text>
                     </TouchableOpacity>
                  </View>
               </>
               {/* : null
                } */}


               {/* Merchandiser Image Cards */}
               <View style={{ flex: 1, marginTop: 20, }}>
                  {grromingImages && grromingImages.length > 0 ? (
                     grromingImages.map((item, index) => (
                        <View key={index} style={styles.merchSection}>
                           <Text style={styles.merchName}>{item?.EmployeeName}</Text>

                           <View style={{ padding: 0, }}>
                              {item?.GroomingImages?.map((imgObj, i) => (
                                 <View key={i} style={{ marginBottom: 10 }}>
                                    <TouchableOpacity activeOpacity={1} onPress={() => openGroomingZoom(item?.GroomingImages, index)}>
                                       <Image
                                          source={{ uri: imgObj.ImageUrl }}
                                          style={[
                                             styles.image,
                                             {
                                                height: imageHeights[`${index}-${i}`] || 200, // fallback
                                             },
                                          ]}
                                          resizeMode="contain"
                                          onLoad={({ nativeEvent }) => {
                                             const { width, height } = nativeEvent.source;
                                             const screenWidth = Dimensions.get('window').width - 40; // adjust padding
                                             const scaledHeight = (height / width) * screenWidth;

                                             setImageHeights(prev => ({
                                                ...prev,
                                                [`${index}-${i}`]: scaledHeight,
                                             }));
                                          }}

                                       />
                                    </TouchableOpacity>
                                    {statuses[index] === 'Aprooved' && (
                                       <TouchableOpacity activeOpacity={1} onPress={() => openGroomingZoom(item.GroomingImages, index)}>
                                          <Image
                                             source={require('../assets/icons/audit/Approved.png')}
                                             style={styles.overlayIcon}
                                          />
                                       </TouchableOpacity>
                                    )}

                                    {statuses[index] === 'Reject' && (
                                       <TouchableOpacity activeOpacity={1} onPress={() => openGroomingZoom(item.GroomingImages, index)}>
                                          <Image
                                             source={require('../assets/icons/audit/Reject.png')}
                                             style={styles.overlayIcon}
                                          />
                                       </TouchableOpacity>
                                    )}
                                 </View>
                              ))}
                           </View>


                           {/* Rejection Reason */}
                           {selectedReasons[index] && (
                              <View style={styles.reasonBox}>
                                 <Text style={styles.reasonText}>
                                    Reason: {selectedReasons[index]}
                                 </Text>
                              </View>
                           )}

                           {/* Action Buttons */}
                           {statuses[index] === null || statuses[index] === undefined ? (
                              <View style={styles.buttonRow}>
                                 <TouchableOpacity
                                    style={[styles.actionButton, styles.approveButton]}
                                    onPress={() => handleApprove(index, item)}
                                 >
                                    <Text style={styles.buttonText}>Approve</Text>
                                 </TouchableOpacity>

                                 <TouchableOpacity
                                    style={[styles.actionButton, styles.rejectButton]}
                                    onPress={() => handleReject(index, item)}
                                 >
                                    <Text style={styles.buttonText}>Reject</Text>
                                 </TouchableOpacity>
                              </View>
                           ) : (
                              <TouchableOpacity
                                 style={styles.resetBtn}
                                 onPress={() => handleReset(index, item)}
                              >
                                 <Text style={{ color: '#fff' }}>Reset</Text>
                              </TouchableOpacity>
                           )}

                           {/* Modal Selector for Rejection */}
                           {activeRejectIndex === index && (
                              <ModalSelector
                                 ref={(ref) => (modalRefs.current[index] = ref)}
                                 data={groomingReason?.map((r, i) => ({
                                    key: i + 1,
                                    label: r.Reason,
                                    Reason: r.Reason,
                                    ReasonId: r.ReasonId
                                 }))}
                                 onChange={(option) => handleSelectReason(index, option)}
                                 animationType="slide"
                                 optionTextStyle={{ color: '#000' }}
                                 cancelText="Cancel"
                                 cancelStyle={{ backgroundColor: '#f8f8f8' }}
                                 cancelTextStyle={{ color: 'red', fontWeight: 'bold' }}
                                 customSelector={<></>}
                              />
                           )}
                        </View>
                     ))
                  ) : (
                     <View style={{ height: 400, alignItems: 'center', justifyContent: 'center' }}>
                        <Image source={require('../assets/icons/audit/NoDataImage.png')} style={{ height: 150, width: 150, resizeMode: 'contain' }} />
                        <Text style={styles.NoDataText}>No Grooming Images to Audit</Text>
                     </View>
                  )}
               </View>
            </ScrollView>
         </View>
         {showZoom && (
            <View style={styles.zoomWrapper}>
               <ImageViewer
                  ref={zoomRef}
                  imageUrls={zoomImages}
                  enableSwipeDown
                  onSwipeDown={() => setShowZoom(false)}
                  renderHeader={() => (
                     <View style={styles.zoomHeader}>
                        <TouchableOpacity onPress={() => setShowZoom(false)}>
                           <Image source={require('../assets/icons/back.png')} style={{ height: 20, width: 20, tintColor: '#fff', }} />
                        </TouchableOpacity>
                     </View>
                  )}
                  renderIndicator={() => null}
               />
            </View>
         )}
      </Container>
   );
};

const styles = StyleSheet.create({
   scrollView: { flex: 1 },
   content: { padding: 10 },
   zoomWrapper: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: '#000',
      zIndex: 10000,
   },
   zoomHeader: {
      height: 20,
      paddingHorizontal: 15,
      alignSelf: 'flex-start',
      marginTop: 10
   },
   zoomClose: {
      color: '#fff',
      fontSize: 18,
   },
   goButton: {
      backgroundColor: '#00968e',
      width: 150,
      padding: 10,
      borderRadius: 8,
      alignItems: 'center',
   },
   goButtonText: {
      color: '#fff',
      fontSize: 16,
      fontWeight: '600',
   },
   merchSection: {
      // backgroundColor: '#af5656ff',
      padding: 0,
      borderRadius: 8,
      marginBottom: 15,
      // elevation: 3,
      // borderWidth: 1,
      // borderColor: '#ddd',
   },
   merchName: {
      color: '#000',
      fontSize: 16,
      fontWeight: 'bold',
      marginBottom: 12,
   },
   imageBox: { padding: 8 },
   image: {
      width: '100%',
      // borderRadius: 15,
      resizeMode: 'contain',
   },
   overlayIcon: {
      position: 'absolute',
      top: 10,
      right: 15,
      width: 28,
      height: 28,
   },
   buttonRow: {
      flexDirection: 'row',
      justifyContent: 'space-around',
      marginTop: 10,
   },
   actionButton: {
      flex: 1,
      padding: 12,
      borderRadius: 6,
      marginHorizontal: 4,
      alignItems: 'center',
   },
   approveButton: { backgroundColor: '#00968e' },
   rejectButton: { backgroundColor: '#dc3545' },
   buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
   reasonBox: {
      backgroundColor: '#ffeaea',
      padding: 8,
      borderRadius: 6,
      marginTop: 10,
   },
   reasonText: { color: '#dc3545', fontWeight: '600' },
   resetBtn: {
      backgroundColor: 'gray',
      padding: 12,
      borderRadius: 8,
      alignItems: 'center',
      marginTop: 10,
   },
   supDropDown: {
      height: 44,
      width: '48%',
      borderWidth: 1,
      borderColor: '#ccc',
      borderRadius: 8,
      paddingHorizontal: 10,
      justifyContent: 'center'
   },
   NoDataText: {
      marginTop: 15,
      color: 'gray',
      fontWeight: '500',
      fontSize: 17,
      textAlign: 'center'
   }
});

export default connect(mapStateToProps, mapDispatchToProps)(GroomingPictures);
