import React from 'react';
import { View, ScrollView } from 'react-native';
import { useSelector } from 'react-redux';
import { Button, Text, Divider, withTheme } from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialIcons';

import AppointmentInfo from './components/appointmentInfo';
import PatientInfo from './components/patientInfo';

import styles from './styles';
import { SafeAreaView } from 'react-native-safe-area-context';

const DocIcon = ({ icon, name, type, fileSize }) => {
  let background, iconColor;
  if (type === 'image') {
    iconColor = 'rgba(255,183,104,1)';
    background = 'rgba(255,183,104,0.1)';
  } else {
    iconColor = 'rgba(19,69,149,1)';
    background = 'rgba(19,69,149,0.1)';
  }

  return (
    <View style={[styles.docView, { backgroundColor: background }]}>
      <Icon name={icon} size={50} color={iconColor} />
      <Text style={{ marginTop: 12, color: iconColor }}>{name}</Text>
      <Text style={{ color: iconColor }}>{fileSize}</Text>
    </View>
  );
};

const Footer = () => (
  <SafeAreaView>
    <Divider />
    <View style={styles.footer}>
      <View style={{ flex: 1 }}>
        <Button
          style={styles.btn}
          labelStyle={styles.cancel}
          mode="text"
          onPress={() => console.log('Pressed')}>
          Cancel
        </Button>
      </View>
      <View style={{ flex: 1 }}>
        <Button
          style={styles.btn}
          labelStyle={styles.ok}
          mode="text"
          onPress={() => console.log('Pressed')}>
          Reschedule
        </Button>
      </View>
    </View>
  </SafeAreaView>
);

function AppointmentDetail({ theme }) {
  const selectedID = useSelector(state => state.appointmentReducer.selectedID);

  const appointments = useSelector(
    state => state.appointmentReducer.appointments,
  );

  const appointment = appointments.find(itx => itx.id === selectedID);

  return (
    <View forceInset={{ top: 'never' }} style={styles.container}>
      <ScrollView>
        <View style={{ marginHorizontal: 24 }}>
          {selectedID !== -1 && (
            <React.Fragment>
              <AppointmentInfo theme={theme} appointment={appointment} />
              <PatientInfo />
              <Text style={[styles.title, styles.head]}>Recent Documents</Text>

              <View style={styles.documents}>
                <DocIcon
                  name="Chest X-ray"
                  fileSize="1.7 MB"
                  icon="image"
                  type="image"
                />
                <DocIcon
                  name="Blood Test"
                  fileSize="1.4 MB"
                  icon="picture-as-pdf"
                  type="PDF"
                />
                <DocIcon
                  name="Lab results"
                  fileSize="1.2 MB"
                  icon="picture-as-pdf"
                  type="PDF"
                />
              </View>
            </React.Fragment>
          )}
        </View>
      </ScrollView>
      <Footer />
    </View>
  );
}

export default withTheme(AppointmentDetail);