'use client'
import { Container, SubContainer } from '@/components/Containers/Container'
import { Box, Typography, TextField } from '@mui/material'
import React, { useState } from 'react'
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import { useContext } from 'react'
import { DataContext } from '@/context/DataContext'

const RadioComponent = ({ heading, handleChange, radioData, value }) => {
  return (
    <SubContainer>
      <Typography className='textGrey'>{heading}</Typography>
      <RadioGroup onChange={handleChange} value={value} sx={{ mt: '0.5rem', ml: '0.5rem', gap: '15px', flexDirection: 'row' }}>
        {radioData.map((item) => (
          <FormControlLabel
            value={item.value}
            key={item.id}
            control={<Radio sx={{ color: '#C5C5C7' }} color='success' />}
            label={item.name}
            className='flex-center'
            sx={{
              height: '52px', border: item.value == value ? '1px solid #26c77a' : '1px solid #C5c5c7',
              borderRadius: '6px', color: item.value == value ? '#26c77a' : '#C5c5c7', pr: '10px'
            }} />
        ))}
      </RadioGroup>
    </SubContainer>
  )
}

const RadioData_1 = [
  {
    id: 1,
    value: 'yes',
    name: 'Yes',
  },
  {
    id: 2,
    value: 'no',
    name: 'No'
  }
]
const RadioData_2 = [
  {
    id: 1,
    value: 'beginner',
    name: 'Beginner',
  },
  {
    id: 2,
    value: 'some_experience',
    name: 'Some experience'
  },
  {
    id: 3,
    value: 'highly_skills',
    name: 'Highly skilled'
  }
]
const RadioData_3 = [
  {
    id: 1,
    value: 'easy',
    name: 'Easy'
  },
  {
    id: 2,
    value: 'moderate',
    name: 'Moderate'
  },
  {
    id: 3,
    value: 'slightly_difficult',
    name: 'Slightly Difficult'
  },
  {
    id: 4,
    value: 'strenuous',
    name: 'Strenuous'
  }
]

const page = () => {

  const Data = useContext(DataContext);
  const handleTitle = (e) =>{
    Data.setGeneralInfo(prevData=>({
      ...prevData,
      title:e.target.value
    }))
  }

  const handleExperience = (e) => {
    Data.setGeneralInfo(prevData => ({
      ...prevData,
      experience: e.target.value
    }))
  }

  const handleSkillLevel = (e) => {
    Data.setGeneralInfo(prevData => ({
      ...prevData,
      skillLevel: e.target.value
    }))
  }
  const handleDifficultyLevel = (e) => {
    Data.setGeneralInfo(prevData => ({
      ...prevData,
      difficulty: e.target.value
    }))
  }

  const handleTourKind = (e) => {
    Data.setGeneralInfo(prevData => ({
      ...prevData,
      tourKind: e.target.value
    }))
  }


  return (
    <Container>
      <Box className='flex flex-col align-center' sx={{ gap: '24px' }}>

        <SubContainer>
          <Typography className='heading'>General Information</Typography>
          <Typography className='textGrey' sx={{ mt: '26px', mb: '8px' }}>Five an appropriate title to this experience</Typography>

          <TextField
            id="outlined-basic"
            variant="outlined"
            placeholder={'Type here'}
            sx={{
              width: '100%',
              "& .MuiOutlinedInput-input": {
                height: 5.4
              },
            }}
            value={Data.generalInfo.title}
            onChange={(e) => handleTitle(e)}

          />

        </SubContainer>

        <SubContainer>
          <Typography className='subHeading'>Experience Type</Typography>
          <Typography className='textGrey' sx={{ mt: '1rem' }}>Specify the kind of experience this will be</Typography>

          <RadioGroup onChange={handleTourKind} value={Data.generalInfo.tourKind} sx={{ mt: '0.5rem', ml: '0.5rem', gap: '1rem' }}>

            <FormControlLabel
              value="Guided_Tour"
              control={<Radio sx={{ color: '#C5C5C7' }} color='success' />}
              label="Guided Tour"
              sx={{
                height: '52px', width: '153px', border: Data.generalInfo.tourKind == 'Guided_Tour' ? '1px solid #26c77a' : '1px solid #C5c5c7',
                borderRadius: '6px', color: Data.generalInfo.tourKind == 'Guided_Tour' ? '#26c77a' : '#C5c5c7'
              }} />

            <FormControlLabel
              value="Outdoor_recreational_activity"
              control={<Radio sx={{ color: '#C5C5C7' }} color='success' />}
              label="Outdoor recreational activity"
              sx={{
                height: '52px', width: '287px', border: Data.generalInfo.tourKind == 'Outdoor_recreational_activity' ? '1px solid #26c77a' : '1px solid #C5c5c7',
                borderRadius: '6px', color: Data.generalInfo.tourKind == 'Outdoor_recreational_activity' ? '#26c77a' : '#C5c5c7'
              }} />

            <FormControlLabel
              value="Recreational_Event"
              control={<Radio sx={{ color: '#C5C5C7' }} color='success' />}
              label="Recreational Event"
              sx={{
                height: '52px', width: '211px', border: Data.generalInfo.tourKind == 'Recreational_Event' ? '1px solid #26c77a' : '1px solid #C5c5c7',
                borderRadius: '6px', color: Data.generalInfo.tourKind == 'Recreational_Event' ? '#26c77a' : '#C5c5c7'
              }} />

          </RadioGroup>

        </SubContainer>

        <RadioComponent
          heading='Will the guest need prioe experience to confortably enjoy this experience'
          handleChange={handleExperience}
          radioData={RadioData_1}
          value={Data.generalInfo.experience}
        />

        <RadioComponent
          heading='How difficult would you rate this experience for guests on an average'
          handleChange={handleSkillLevel}
          radioData={RadioData_2}
          value={Data.generalInfo.skillLevel}
        />

        <RadioComponent
          heading='How difficult would you rate this experience for guests on an average'
          handleChange={handleDifficultyLevel}
          radioData={RadioData_3}
          value={Data.generalInfo.difficulty}
        />
      </Box>
    </Container>
  )
}

export default page optimised this code