import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Marquee } from '@animatereactnative/marquee';
import { ElevationObject } from '../../../components/Button';
import TextView from '../../../components/TextView';

const PinMessage = ({
  visible=false,
  title,
  message
}) => {
  const [expand, setExpand] = useState(false)
  if (visible)
    return (
      <View style={styles.pinMessageCard}>
        <Marquee style={$padding(12, 16, 4)} spacing={$vw(80)} speed={0.8}>
          <Text style={styles.textTitle}>{title}</Text>
        </Marquee>
        { expand &&
          <TextView style={styles.textMessage}>{message}</TextView>
        }
        <MaterialIcons
          name={expand ? "keyboard-arrow-up" : "keyboard-arrow-down"}
          size={26}
          color={colorCancel}
          onPress={() => setExpand(!expand)}/>
      </View>
    );
  else
    return <></>
}

export default PinMessage;

const styles = StyleSheet.create({
  pinMessageCard: {
    top: 180,
    left: 16,
    right: 16,
    zIndex: 10,
    overflow: "hidden",
    borderRadius: 6,
    alignItems: "center",
    position: 'absolute',
    backgroundColor: colorLight,
    ...ElevationObject(3)
  },
  textTitle: {
    color: textPrimary,
    fontSize: 16,
    fontWeight: "bold"
  },
  textMessage: {
    color: textSecondary,
    padding: 8,
    fontSize: 14,
    marginBottom: -20
  }
})