policy, 2 & 3 API

import React, { Component } from 'react';
import './Layout.css';
import './pages.css';
import Tabs from './Tabs';
import Layout from './Layout';
import { connect } from 'react-redux';
import { setData } from '../actions/schemeActions';


class Policy extends Component {
    constructor(props) {
      super(props);
      this.state = {
        selectedOption: '',
        selectedPolicy: '',
        selectedScheme: '',
        policies: [],
        schemes: [],
      };
    }

    // Event handler to handle select change
    handleSelectChange = (event) => {
      this.setState({ selectedOption: event.target.value });
    };

    handlePolicySelectChange = (event) => {
      const selectedPolicy = event.target.value;
      this.setState({ selectedPolicy });
      this.fetchPolicyData(selectedPolicy, this.state.selectedScheme);
    };

    handleSchemeSelectChange = (event) => {
      const selectedScheme = event.target.value;
      this.setState({ selectedScheme });
      this.fetchPolicyData(this.state.selectedPolicy, selectedScheme);
    };

    fetchPolicyData = (selectedPolicy, selectedScheme) => {
      const accessToken = localStorage.getItem('accessToken');
      console.log(accessToken);

      // Construct the API URL based on selectedPolicy and selectedScheme
      const apiUrl = `http://192.0.1.23:5000/scheme?id=${selectedPolicy}`;

      fetch(apiUrl, {
        headers: {
          Authorization: `${accessToken}`,
        },
      })
        .then((response) => response.json())
        .then((data) => {
          this.props.setData(data);
          console.log(data);
        })
        .catch((error) => {
          console.error('Error fetching data from protected API:', error);
        });
    };


    componentDidMount() {
      const accessToken = localStorage.getItem('accessToken');
      console.log(accessToken)

      const apiLink = `http://192.0.1.23:5000/scheme?id=${selectedPolicy}&scheme=${selectedScheme}`
          fetch(apiLink, {
            headers: {
              Authorization: `${accessToken}`,

            },
          })
            .then((response) => response.json())
            .then((data) => {
              this.props.setData(data);
              console.log(data)
            })
            .catch((error) => {
              console.error('Error fetching data from protected API:', error);
            });
    }

    render() {
      const { data } = this.props;

      const tabNames = [
        'Details',
        'Rules',
        'Providers',
        'Insurers',
        'Inclusions and Exclusions',
        'Benefits',
        'Family Structure',
        'Self Fund Payment',
        'SLAs'
      ];

      return (
       <>
       <Layout >
       <div className='main-header'>
        <div className='policy-section'>

        <select id="policySelect" onChange={this.handlePolicySelectChange}>
              <option value="option1">Policy 1</option>
              <option value="option2">Policy 2</option>
              <option value="option3">Policy 3</option>
              <option value="option4">Policy 4</option>
           </select>

           <div className='policy-number'>
              <span>{data.policy.policyNumber}</span>
           </div>
        </div>


           <select id="schemeSelect" onChange={this.handleSchemeSelectChange}>
              <option value="option1">Scheme 1</option>
              <option value="option2">Scheme 2</option>
              <option value="option3">Scheme 3</option>
              <option value="option4">Scheme 4</option>
           </select>

         {/* <Dropdown />   */}


        <div className='scheme-section'>
            <div className='scheme-name'>
            <span>Scheme Name</span>
            </div>

            <div className='scheme-company-duration'>
              {/* this data.startDate works */}
              <span>{data.name}</span>
            </div>
          </div>
        </div>


        <div className='main-content'>
          <Tabs tabNames={tabNames} data={this.props.data}/>
        </div>
       </Layout>
       </>
      );
    }
  }
  const mapStateToProps = (state) => ({
    data: state.scheme.data,
  });

  const mapDispatchToProps = {
    setData,
  };

  export default connect(mapStateToProps, mapDispatchToProps)(Policy);