import { Branch } from 'api/branch';
import React from 'react';
import { useTranslation } from 'react-i18next';
import {
  Image,
  Modal,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import Telegram from 'screens/../../assets/bootsplash/Telegram.png';
import Local from 'screens/../../assets/bootsplash/local.png';
import Clock from 'svg/Clock';
import CloseIcon from 'svg/Close';
import Location from 'svg/Location';
import Phone from 'svg/Phone';

type BottomModalProps = {
  visible: boolean;
  onClose: () => void;
  branch: Branch | null;
};

const BottomModal: React.FC<BottomModalProps> = ({
  visible,
  onClose,
  branch,
}) => {
  const { t } = useTranslation();

  return (
    <Modal
      animationType="slide"
      transparent
      visible={visible}
      onRequestClose={onClose}
    >
      <View style={styles.overlay}>
        <TouchableOpacity
          style={styles.overlayTouchable}
          onPress={onClose}
          activeOpacity={1}
        />
        <View style={[styles.modal]}>
          <TouchableOpacity
            style={styles.handleContainer}
            activeOpacity={0.7}
            onPress={onClose}
          >
            <View style={styles.handle}>
              <CloseIcon />
            </View>
          </TouchableOpacity>
          <Image source={Local} style={styles.image} />
          <ScrollView contentContainerStyle={styles.scrollContainer}>
            <View style={styles.card}>
              <View style={styles.row}>
                <Location color="#28A7E8" width={26} height={26} />
                <View style={styles.cardText}>
                  <Text style={styles.label}>{t('Manzil')}</Text>
                  <Text style={styles.value}>{branch?.address}</Text>
                </View>
              </View>
            </View>
            <View style={styles.card}>
              <View style={styles.row}>
                <Clock color="#28A7E8" width={26} height={26} />
                <View style={styles.cardText}>
                  <Text style={styles.label}>{t('Ish vaqti')}</Text>
                  <Text style={styles.value}>{branch?.workingHours}</Text>
                </View>
              </View>
            </View>
            <View style={styles.card}>
              <View style={styles.row}>
                <Phone color="#28A7E8" width={26} height={26} />
                <View style={styles.cardText}>
                  <Text style={styles.label}>{t('Telefon')}</Text>
                  <Text style={styles.value}>{branch?.phone}</Text>
                </View>
              </View>
            </View>
            <View style={styles.card}>
              <View style={styles.row}>
                <Image source={Telegram} style={{ width: 26, height: 26 }} />
                <View style={styles.cardText}>
                  <Text style={styles.label}>{t('Telegram admin')}</Text>
                  <Text style={styles.value}>{branch?.telegramAdmin}</Text>
                </View>
              </View>
            </View>
            <View style={styles.card}>
              <View style={styles.row}>
                <Image source={Telegram} style={{ width: 26, height: 26 }} />
                <View style={styles.cardText}>
                  <Text style={styles.label}>{t('Telegram kanal')}</Text>
                  <Text style={styles.value}>{branch?.telegramChannel}</Text>
                </View>
              </View>
            </View>
          </ScrollView>
        </View>
      </View>
    </Modal>
  );
};

export default BottomModal;

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    justifyContent: 'flex-end',
    backgroundColor: 'rgba(0,0,0,0.4)',
  },
  overlayTouchable: {
    flex: 1,
  },
  scrollContainer: {},
  modal: {
    backgroundColor: '#fff',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    paddingBottom: 30,
    elevation: 5,
    height: '70%',
  },
  image: {
    width: '100%',
    height: 200,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  card: {
    backgroundColor: '#F3FAFF',
    paddingTop: 5,
    paddingRight: 10,
    paddingLeft: 10,
    paddingBottom: 5,
    margin: 'auto',
    width: '95%',
    marginTop: 10,
    borderRadius: 8,
  },
  cardText: {
    width: '90%',
  },
  row: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: 5,
  },
  label: {
    fontSize: 16,
    fontWeight: '600',
    color: '#000000',
  },
  value: {
    fontSize: 14,
    color: '#000000B2',
    fontWeight: '500',
  },
  handleContainer: {
    position: 'absolute',
    zIndex: 10,
    width: '100%',
    alignItems: 'flex-end',
    justifyContent: 'flex-end',
    paddingVertical: 10,
  },

  handle: {
    width: 25,
    height: 25,
    right: 10,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 500,
    backgroundColor: '#ffff',
  },
});