import React, {useState} from 'react'
import {
  FormControlLabel,
  Checkbox,
  FormGroup,
  Box,
  Typography,
  Divider,
  Grid
} from '@material-ui/core'

export default function InboundSettings(){
  const [state, setState] = React.useState({
    checkedA: true,
    checkedB: true,
    checkedF: true,
    checkedG: true,
  });

  const handleChange = name => event => {
    setState({ ...state, [name]: event.target.checked });
  };

  return (

    <div>
    
     <Typography variant={"h4"}>
     Control inbound conversations and the launcher
     </Typography> 

     <Typography variant={"subtitle2"}>
     Control who can send you messages and where they see the launcher
     </Typography>


      <Typography variant={"h5"}>
       New conversations button
      </Typography>
    
      <Grid container>
        <FormControlLabel
          control={
            <Checkbox
              checked={state.checkedB}
              onChange={handleChange('checkedB')}
              value="checkedB"
              color="primary"
            />
          }
          label="Let people start new inbound conversations with you"
        />
      </Grid>

      <Typography variant={"caption"}>
        When this is turned off, people can only reply to the outbound messages  you send.
      </Typography>

      <Divider/>

      <Typography variant={"h5"}>
        visibility
      </Typography>

      <Typography variant={"body"}>
        Control who sees the standard Messenger launcher on your website.
      </Typography>

      <Typography variant={"body"}>
        Any messages you send will still be delivered.
      </Typography>

      <Typography variant={"body"}>
        On the web, show the standard Messenger launcher to:
        Users
      </Typography>

      
      <Grid container>
        <FormControlLabel
          control={
            <Checkbox
              checked={state.checkedB}
              onChange={handleChange('checkedB')}
              value="checkedB"
              color="primary"
            />
          }
          label="Users"
        />
      </Grid>


        All users
        Users who match certain data 
        Visitors


        <Grid container>
        <FormControlLabel
          control={
            <Checkbox
              checked={state.checkedB}
              onChange={handleChange('checkedB')}
              value="checkedB"
              color="primary"
            />
          }
          label="Visitors"
        />
      </Grid>

        All visitors
        Visitors who match certain data 
        This doesn’t affect the outbound messages you send.
        
    
    </div>


  )
}
@@ -123,16 +123,39 @@
 ,%0A  Grid
+,%0A  RadioGroup,%0A  Radio
 %0A%7D from 
@@ -484,24 +484,25 @@
 %3E%0A    %0A     
+ 
 %3CTypography 
@@ -513,24 +513,25 @@
 ant=%7B%22h4%22%7D%3E%0A
+ 
      Control
@@ -562,32 +562,33 @@
 nd the launcher%0A
+ 
      %3C/Typograph
@@ -593,24 +593,25 @@
 phy%3E %0A%0A     
+ 
 %3CTypography 
@@ -629,24 +629,25 @@
 ubtitle2%22%7D%3E%0A
+ 
      Control
@@ -701,24 +701,25 @@
 he launcher%0A
+ 
      %3C/Typog
@@ -767,17 +767,16 @@
 %3E%0A      
- 
 New conv
@@ -1799,23 +1799,16 @@
 raphy%3E%0A%0A
-      %0A
       %3CG
@@ -2117,25 +2117,255 @@
 /Grid%3E%0A%0A
-%0A  
       
+%3CRadioGroup%0A        aria-label=%22gender%22%0A        name=%22gender1%22%0A        //className=%7Bclasses.group%7D%0A        //value=%7Bvalue%7D%0A        //onChange=%7BhandleChange%7D%0A      %3E%0A        %3CFormControlLabel value=%22female%22 control=%7B%3CRadio /%3E%7D label=%22
 All user
@@ -2361,24 +2361,28 @@
 l=%22All users
+%22 /%3E
 %0A        Use
@@ -2374,24 +2374,82 @@
  /%3E%0A        
+%3CFormControlLabel value=%22male%22 control=%7B%3CRadio /%3E%7D label=%22
 Users who ma
@@ -2469,30 +2469,34 @@
 ata 
+%22 /%3E
 %0A      
-  Visitors%0A%0A%0A  
+%3C/RadioGroup%3E%0A%0A
     
@@ -2818,18 +2818,263 @@
 %0A%0A      
-  
+%3CRadioGroup%0A          aria-label=%22gender%22%0A          name=%22gender1%22%0A          //className=%7Bclasses.group%7D%0A          //value=%7Bvalue%7D%0A          //onChange=%7BhandleChange%7D%0A        %3E%0A          %3CFormControlLabel value=%22female%22 control=%7B%3CRadio /%3E%7D label=%22
 All visi
@@ -3077,16 +3077,20 @@
 visitors
+%22 /%3E
 %0A       
@@ -3090,16 +3090,76 @@
         
+  %3CFormControlLabel value=%22male%22 control=%7B%3CRadio /%3E%7D label=%22
 Visitors
@@ -3182,17 +3182,85 @@
 in data 
+%22 /%3E
 %0A
+        %3C/RadioGroup%3E%0A%0A        %3CTypography variant=%22caption%22%3E%0A  
         
@@ -3315,24 +3315,38 @@
 nd.%0A        
+%3C/Typography%3E%0A
 %0A    %0A    %3C/

Update InboundSettings.js