import { useContext, useEffect, useState } from 'react';
import { useFormik } from 'formik';
import { Alert } from 'antd';
import useDarkMode from '../../hooks/useDarkMode';
import ThemeContext from '../../contexts/themeContext';
import Button from '../../components/bootstrap/Button';
import PageWrapper from '../../layout/PageWrapper/PageWrapper'
import Page from '../../layout/Page/Page';
import { registrationPagesMenu} from '../../menu';
import LivestreamService from '../../services/LivestreamService';
import Label from '../../components/bootstrap/forms/Label';
import FormGroup from '../../components/bootstrap/forms/FormGroup';
import Select from '../../components/bootstrap/forms/Select';
import Option from '../../components/bootstrap/Option';
import { TGeneralStreamingData } from '../../type/livestream-type';

const Links = () => {
  const { mobileDesign } = useContext(ThemeContext);
  const { themeStatus } = useDarkMode();
  const baseCombinedLink = 'https://livestream.tniglobal.org/translations';

  const [streamSpaceData, setStreamSpaceData] = useState<TGeneralStreamingData>();
  const [selectedLanguage, setSelectedLanguage] = useState('');

  const buildDirectLanguageLink = (languageName: string) => (
    `${baseCombinedLink}/${languageName}`
  );


  const linksForm = useFormik({
    initialValues: {
      id: 0,
      language_value: '',
    },
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    onSubmit: async(values) => {
      setSelectedLanguage(values.language_value)
      console.log(values)

    },
  });



  useEffect(() => {
    fetchUpcomingProgramWithLanguages();
  }, []);
  

  const fetchUpcomingProgramWithLanguages = async () => {
    try {
      const response = await LivestreamService.fetchUpcomingProgramWithLanguages();
      console.log(response);
      
      if (response.success) {
        setStreamSpaceData({ program: response.data, language_registrations: response.data.language_registrations})

      } else {
        
      }
      
      //window.location.replace(res.data.session.url);

    } catch (error) {
      console.error(error);
    } finally {
    }
  };

  return (
    <PageWrapper title={registrationPagesMenu.directlinks.text}>
      <Page container='fluid'>
        <div className='pt-3 pb-5'>

          <Label className='text-info fw-bold mt-3 mb-4 h3 text-center'>
            Direct Links
          </Label>
          
          <div className='row g-4'>
              <div className='col-lg-12'>
                <Label className='text-muted fw-bold mt-3 mb-4 h5 text-center'>
                  Select a language to generate the direct link.
                </Label>
                <FormGroup id='language_value' label='Available Languages' isFloating>
                  <Select ariaLabel='' placeholder='Select...' onChange={linksForm.handleChange}
                    value={linksForm.values.language_value}
                  >
                    {streamSpaceData?.language_registrations.map((lang: any) => (
                      <Option key={lang.id} value={lang.language}>
                        {lang.language}
                      </Option>
                    ))}
                  </Select>
                </FormGroup>
                <div className="mt-4 mb-3 text-center">
                  <Button className="w-50" color="success" onClick={linksForm.handleSubmit}>
                    Generate
                  </Button>
                </div>

                <div className='my-4 h5 text-center fw-bold text-danger'>
                  {selectedLanguage !== '' ? (
                    <div className='d-flex justify-content-center align-items-center'>
                      {buildDirectLanguageLink(selectedLanguage)}
                    </div>
                  ) : (
                    <p></p>
                  )}
                </div>

                <Alert
                  className='mb-3'
                  type='info'
                  showIcon
                  message='All language links (auto-generated)'
                  description='Use these direct links to send viewers straight to one specific language stream.'
                />

                <div className='my-3'>
                  {(streamSpaceData?.language_registrations || []).map((lang: any) => (
                    <div key={lang.id} className='border rounded p-3 mb-2'>
                      <div className='fw-bold text-primary mb-1'>{lang.language}</div>
                      <div className='text-break small'>
                        {buildDirectLanguageLink(lang.language)}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>


        </div>
      </Page>
    </PageWrapper>
  );
};

export default Links;