import React, {useState, useEffect} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Platform,
  Linking,
  TouchableOpacity,
} from 'react-native';
import R from '../../assets/R';
import AppText from '../../components/AppText';
import TextMulti from '../../components/Input/TextMulti';
import I18n from '../../helper/i18/i18n';
import {connect} from 'react-redux';
import HeaderBack from '../../components/Header/HeaderBack';
import {getFontXD, HEIGHTXD, WIDTHXD, callNumber} from '../../Config/Functions';
import {showLoading, hideLoading} from '../../actions/loadingAction';
import {showAlert, TYPE} from '../../components/DropdownAlert';
import {sendRequest} from '../../apis/Functions/General';
import {useNavigation} from '@react-navigation/native';

const ServiceCustomerView = (props) => {
  const naviation = useNavigation();
  const [content, setContent] = useState('');

  const onClickSend = async () => {
    props.showLoading();
    const res = await sendRequest({content, platform: Platform.OS});
    props.hideLoading();
    if (res.data.code == 200) {
      naviation.goBack();
      showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message);
    } else {
      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
    }
  };
  console.log(props.user.company_info);

  const {
    name,
    email,
    website,
    hotline,
    office_day,
    office_hours,
    office_sat_time,
    office_sun_time,
    address,
    hotline_call,
  } = props.user.company_info;

  return (
    <View style={{flex: 1}}>
      <HeaderBack title={'CustomerCare'} />
      <View
        style={{
          flex: 1,
          paddingHorizontal: 10,
          paddingTop: 10,
        }}>
        <AppText i18nKey={'HaNoiOffice'} style={styles.title} />
        <Text style={styles.txtContent}>{name}</Text>

        <AppText i18nKey={'Address'} style={styles.title} />
        <Text style={styles.txtContent}>{address}</Text>

        <View style={styles.row}>
          <Text style={styles.title}>Email:</Text>
          <Text style={styles.txtContent}> {email}</Text>
        </View>
        <TouchableOpacity
          onPress={async () => {
            const supported = await Linking.canOpenURL(website);
            if (supported) Linking.openURL(website);
          }}>
          <View style={styles.row}>
            <Text style={styles.title}>Website: </Text>
            <Text style={styles.txtLink}>{website}</Text>
          </View>
        </TouchableOpacity>

        <AppText i18nKey={'HotLine'} style={styles.title} />
        <TouchableOpacity onPress={() => callNumber(hotline_call)}>
          <Text style={[styles.txtContent, {textDecorationLine: 'underline'}]}>
            {hotline}
          </Text>
        </TouchableOpacity>

        <AppText i18nKey={'WorkingTime'} style={styles.title} />
        <View style={{flexDirection: 'row'}}>
          <View style={styles.wrapLeft}>
            <Text style={styles.txtContent}>{office_day}</Text>
          </View>

          <Text style={styles.txtRight}>{office_hours}</Text>
        </View>
        <View style={{flexDirection: 'row'}}>
          <View style={styles.wrapLeft}>
            <AppText i18nKey={'Saturday'} style={styles.txtContent} />
          </View>

          <Text style={styles.txtRight}>{office_sat_time}</Text>
        </View>
        <View style={{flexDirection: 'row'}}>
          <View style={styles.wrapLeft}>
            <AppText i18nKey={'Sunday'} style={styles.txtContent} />
          </View>

          <Text style={styles.txtRight}>{office_sun_time}</Text>
        </View>

        <View style={{marginTop: 20, flex: 1}}>
          <TextMulti
            onChangeText={(val) => setContent(val)}
            title={I18n.t('ContentRequire')}
          />
        </View>
        <View
          style={{
            justifyContent: 'center',
            alignItems: 'center',
            marginBottom: 20,
          }}>
          <TouchableOpacity onPress={onClickSend} style={styles.btn}>
            <AppText style={styles.txtBtn} i18nKey={'Send'} />
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  title: {
    fontSize: getFontXD(42),
    color: R.colors.main,
    marginTop: 5,
  },
  txtContent: {
    fontSize: getFontXD(42),
    marginTop: 5,
  },
  txtLink: {
    fontSize: getFontXD(42),
    marginTop: 5,
    textDecorationLine: 'underline',
    color: R.colors.main,
  },
  row: {
    flexDirection: 'row',
  },
  btn: {
    width: WIDTHXD(500),
    height: HEIGHTXD(120),
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: R.colors.main,
    borderRadius: 5,
  },
  txtBtn: {
    fontSize: getFontXD(46),
    color: R.colors.white,
    fontWeight: 'bold',
  },
  txtRight: {
    marginLeft: 20,
    fontSize: getFontXD(42),
    marginTop: 5,
  },
  wrapLeft: {
    width: WIDTHXD(400),
  },
});

const mapStateToProps = (state) => {
  return {
    user: state.userReducer,
  };
};
export default connect(mapStateToProps, {showLoading, hideLoading})(
  ServiceCustomerView,
);
