import React, { FunctionComponent, useState } from 'react';
import {
  Alert,
  FlatList,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import { Logger } from '../../utils/Log';

import Zero from '../../resources/images/dial_num_0_wht.png';
import One from '../../resources/images/dial_num_1_wht.png';
import Two from '../../resources/images/dial_num_2_wht.png';
import Three from '../../resources/images/dial_num_3_wht.png';
import Four from '../../resources/images/dial_num_4_wht.png';
import Five from '../../resources/images/dial_num_5_wht.png';
import Six from '../../resources/images/dial_num_6_wht.png';
import Seven from '../../resources/images/dial_num_7_wht.png';
import Eight from '../../resources/images/dial_num_8_wht.png';
import Nine from '../../resources/images/dial_num_9_wht.png';
import Pound from '../../resources/images/dial_num_pound_wht.png';
import Star from '../../resources/images/dial_num_star_wht.png';
import { Strings } from '../../resources/localization/Strings';
import { ICall } from '../../store/currentCall/types';
import { FloatButton } from '../common/flatButton';
import { ImageButton } from '../common/ImageButton';
import Icon from 'react-native-vector-icons/MaterialIcons';

interface IProps {
  callPBX: (phoneNumber: string) => void;
  sendDTMFSignal: (digit: string) => void;
  showCallButton: boolean;
  currentCall?: ICall;
}

export const DialPadView: FunctionComponent<IProps> = ({
  callPBX,
  showCallButton,
  sendDTMFSignal,
  currentCall,
}) => {
  const logger = new Logger('DialPadView');
  const [phoneNumber, setNumber] = useState('');

  const Items = [
    { key: '1', secondKey: '1', src: One },
    { key: '2', secondKey: '2', src: Two },
    { key: '3', secondKey: '3', src: Three },
    { key: '4', secondKey: '4', src: Four },
    { key: '5', secondKey: '5', src: Five },
    { key: '6', secondKey: '6', src: Six },
    { key: '7', secondKey: '7', src: Seven },
    { key: '8', secondKey: '8', src: Eight },
    { key: '9', secondKey: '9', src: Nine },
    { key: '*', secondKey: '*', src: Star },
    { key: '0', secondKey: '+', src: Zero },
    { key: '#', secondKey: '#', src: Pound },
  ];

  const onNumberPressed = (key: string) => () => {
    if (currentCall != null) {
      // Send DTMF Signal
      sendDTMFSignal(key);
    }
    setNumber(phoneNumber + key);
  };

  const onBackSpacePressed = () => {
    setNumber(phoneNumber.substring(0, phoneNumber.length - 1));
  };

  const renderItem = ({ item }: any) => (
    <ImageButton
      style={{
        container: {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          margin: 10,
        },
        image: {
          resizeMode: 'contain',
          width: 60,
          height: 60,
        },
      }}
      imageSource={item.src}
      onPress={onNumberPressed(item.key)}
      onLongPress={onNumberPressed(item.secondKey)}
    />
  );

  const call = () => {
    if (phoneNumber === '') {
      logger.info('Dialpad Invalid Number!' + phoneNumber);
      Alert.alert('Invalid Number!');
    } else {
      logger.info('Dialpad call:' + phoneNumber);
      callPBX(phoneNumber);
    }
  };

  return (
    <View style={styles.mainContainer}>
      <View style={styles.numberContainer}>
        <TextInput editable={true} maxLength={15} style={styles.textInput}>
          {phoneNumber}
        </TextInput>
        <TouchableOpacity onPress={onBackSpacePressed}>
          <Icon name="backspace" style={styles.Icon} />
        </TouchableOpacity>
      </View>

      <FlatList
        contentContainerStyle={styles.buttonsContainer}
        data={Items}
        renderItem={renderItem}
        numColumns={3}
      />

      {showCallButton && (
        <FloatButton
          onPress={call}
          title={Strings.call}
          style={{
            container: styles.callButton,
            text: styles.textButton,
          }}
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  mainContainer: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    margin: 20,
  },
  buttonsContainer: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignContent: 'space-between',
    flex: 1,
    margin: 10,
  },
  numberContainer: {
    display: 'flex',
    justifyContent: 'center',
    flexDirection: 'row',
    alignContent: 'space-between',
  },
  Icon: {
    textAlign: 'center',
    margin: 10,
    fontSize: 30,
    color: '#0086CF',
  },
  textInput: { fontSize: 25, color: 'black', textAlign: 'center' },
  callButton: {
    backgroundColor: '#0086CF',
    width: '50%',
    alignSelf: 'center',
    marginBottom: 20,
    height: 30,
  },
  textButton: { textAlign: 'center', color: 'white', fontSize: 20 },
});