import Header from './Header';
import { HistoricalImpliedVolatilityChart } from "./HistoricalImpliedVolatilityChart";
import { Picker } from './Picker';
import { atom as $, useAtomValue } from 'jotai';
import { loadable } from 'jotai/utils';
//import './index.css';
//@ts-ignore
import k from './App.module.css';
import { useEffect } from 'react';
import { CalendarPricesChart } from './CalendarPricesChart';

export const baseUrl = 'http://127.0.0.1:8234';

/* The following are wrapped in atoms to prevent re-creating them if App() re-runs. */
export const $underlyingsUrl = $(`${baseUrl}/option_quotes/underlyings`);
export const $selectedUnderlying = $('');

export const $quoteDatePickerUrl = $((get) => `${baseUrl}/option_quotes/${get($selectedUnderlying)}/quote_dates`);
export const $isQuoteDatePickerEnabled = $((get) => get($selectedUnderlying)!=='');
export const $selectedQuoteDate = $('');

export const $strikePickerUrl = $((get) => `${baseUrl}/option_quotes/${get($selectedUnderlying)}/${get($selectedQuoteDate)}/strikes`);
export const $isStrikePickerEnabled = $((get) => get($selectedQuoteDate)!=='' && get($selectedUnderlying)!=='');
export const $selectedStrike = $('');

export const $frontMonthExpirationPickerUrl = $((get) => `${baseUrl}/option_quotes/${get($selectedUnderlying)}/${get($selectedQuoteDate)}/expirations`);
export const $isFrontMonthExpirationPickerEnabled = $((get) => get($selectedQuoteDate)!=='' && get($selectedUnderlying)!=='');
export const $selectedFrontExpiration = $('');

export const $backMonthExpirationPickerUrl = $((get) => `${baseUrl}/option_quotes/${get($selectedUnderlying)}/${get($selectedQuoteDate)}/expirations`);
export const $isBackMonthExpirationPickerEnabled = $((get) => get($selectedQuoteDate)!=='' && get($selectedUnderlying)!=='');
export const $selectedBackExpiration = $('');



function App() {
  return (
  <div className={k.app}>
    <Header />
    <div className={k.picker}><label>Underlying</label><Picker $url={$underlyingsUrl} $selectedOption={$selectedUnderlying} /></div>
    <div className={k.picker}><label>Quote Date</label><Picker $url={$quoteDatePickerUrl} $isEnabled={$isQuoteDatePickerEnabled} $selectedOption={$selectedQuoteDate}/></div>
    <div className={k.picker}><label>Strike</label><Picker $url={$strikePickerUrl} $isEnabled={$isStrikePickerEnabled} $selectedOption={$selectedStrike}/></div>
    <div className={k.picker}><label>Front Expiration</label><Picker $url={$frontMonthExpirationPickerUrl} $isEnabled={$isFrontMonthExpirationPickerEnabled} $selectedOption={$selectedFrontExpiration} /></div>
    <div className={k.picker}><label>Back Expiration</label><Picker $url={$backMonthExpirationPickerUrl} $isEnabled={$isBackMonthExpirationPickerEnabled} $selectedOption={$selectedBackExpiration} /></div>
    <CalendarPricesChart />
    {/* <HistoricalImpliedVolatilityChart /> */}
  </div>
  );
}

export default App;