import React from 'react';
import {
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  TextInput,
} from 'react-native';
import styles from './style';
import Header from '../../../components/Header/Header';
import TextField from '../../../components/Input/TextField';
import R from '../../../assets/R';
import TextMulti from '../../../components/Input/TextMulti';
import RadioGroup from '../../../components/RadioButton/RadioGroup';
import RadioButton from '../../../components/RadioButton/RadioButton';
import CardChip from '../../../components/Card/CardChip';
const NotificationDetailView = props => {
  const {
    showWarning,
    title,
    onTitleChange,
    options,
    selectedValue,
    onValueChange,
    disabled,
    size,
    color,
    direction,
  } = props;
  return (
    <View style={styles.safeArea}>
      <Header isBack title={'Chi tiết thông báo'} />
      <View style={styles.container}>
        {showWarning && (
          <View style={styles.boxInput}>
            <Text style={styles.txtInput}>
              Bạn không thể chỉnh sửa thông báo khi đã gửi{' '}
            </Text>
          </View>
        )}

        <TextField
          title="Tiêu đề thông báo"
          value={title}
          onChangeText={onTitleChange}
          placeholder="HS"
          backgroundColor={R.colors.blue1}
          color={R.colors.white}
          fontSize={R.sizes.sm}
          onFocus={() => {}}
          fontSizeTitle={R.sizes.sm}
          containerMarginBottom={15}
          required
          editable={false}
        />

        <TextField
          title="Mã CBGV"
          value={title}
          onChangeText={onTitleChange}
          placeholder="HS"
          backgroundColor={R.colors.blue1}
          color={R.colors.white}
          fontSize={R.sizes.sm}
          onFocus={() => {}}
          fontSizeTitle={R.sizes.sm}
          required
          containerMarginBottom={15}
          editable={false}
        />
        <TextMulti
          title="Nội dung thông báo"
          titleFontSize={R.sizes.sm}
          value={title}
          onChangeText={onTitleChange}
          placeholder="Thông tin nội dung thông báo sẽ được hiển thị ở đây"
          backgroundColor={R.colors.blue1}
          color={R.colors.white}
          fontSize={R.sizes.sm}
          onFocus={() => {}}
          fontSizeTitle={R.sizes.sm}
          fontSizePlaceHolder={R.sizes.sm}
          required
          containerMarginBottom={15}
          editable={false}
        />

        <RadioGroup
          options={options}
          selectedValue={selectedValue}
          onValueChange={onValueChange}
          disabled={false}
          size={20}
          backgroundBoxColor={R.colors.blue}
          borderBoxColor={R.colors.black}
          direction={'row'}
          marginBtnAndLabel={10}
          // justifyContent={'space-between'}
          containerMarginRight={39}
          containerMarginBottom={15}
          editable={false}
        />

        <CardChip
          title="Chọn những sinh viên nhận thông báo"
          marginBottomTitle={5}
          containerMarginBottom={15}
          heightCard={200}
          cardBackgroundColor={R.colors.blue1}
          cardBorderRadius={10}

          chipBackgroundColor={R.colors.gray1}
          chipBorderRadius={10}
          chipWidth={100}
          chipHeight={50}
          chipMarginVertical={10}
          chipText="859256, Nguyễn Minh Đức"
          chipTextColor={R.colors.blue}
        />

        


      </View>
    </View>
  );
};

export default NotificationDetailView;
