import { useTheme } from '@emotion/react';
import React, { useEffect, useState } from 'react';
import { Input, Button } from '../../index';

const compressor = {
  bg_system: 1,
  bg_text_primary: 2,
  bg_text_secondary: 3,
  bg_text_teriaty: 4,
  bg_white: 5,
  bg_text_disabled: 6,
  bg_border_primary: 7,
  bg_border_seperator: 8,
  bg_background_primary: 9,
  bg_background_secondary: 10,
  bg_background_overlay: 11,
  bg_background_fields: 12,
  bg_error: 13,
  //-----------------------------------------------------------------
  tx_system: 14,
  tx_text_primary: 15,
  tx_text_secondary: 16,
  tx_text_teriaty: 17,
  tx_white: 18,
  tx_text_disabled: 19,
  tx_border_primary: 20,
  tx_border_seperator: 21,
  tx_background_primary: 22,
  tx_background_secondary: 23,
  tx_background_overlay: 24,
  tx_background_fields: 25,
  tx_error: 26,

  bg_system_gradient: 27,

  t_green: 28,
  b_green: 29,
};

export const Landing = () => {
  const [queryParam, setQueryParam] = useState<string>();
  const [isLoading, setLoading] = useState<boolean>(true);
  const [url, setUrl] = useState<string>(
    'https://demand-web-git-branding-test-bondsports.vercel.app/activity/leagues/asd/12'
  );
  const [fetchUrl, setFetchUrl] = useState<string>(
    'https://demand-web-git-branding-test-bondsports.vercel.app/activity/leagues/asd/12'
  );
  const colors = useTheme();

  useEffect(() => {
    let str = '';
    Object.keys(colors).forEach((key, i) => {
      if (i === 0) {
        str += `${compressor[key]}:${colors[key].replace('#', '')}`;
      } else {
        str += `,${compressor[key]}:${colors[key].replace('#', '')}`;
      }
    });
    setQueryParam(str);
    setLoading(false);
  }, [colors]);

  if (isLoading) {
    return <div>loading...</div>;
  }

  return (
    <div
      style={{
        width: '100%',
        height: '98vh',
        position: 'relative',
        display: 'flex',
        overflowX: 'hidden',
        border: ' 1px solid',
        flexDirection: 'column',
      }}
    >
      <div style={{ display: 'flex', padding: '0 4rem', alignItems: 'center' }}>
        <Input
          sizer="S"
          placeholder="fill in the url"
          type="text"
          value={url}
          onChange={(e) => setUrl(e.target.value)}
          clear={() => setUrl('')}
        />
        <Button sizer="S" theme="primary" onClick={() => setFetchUrl(url)}>
          Go
        </Button>
      </div>
      {fetchUrl && (
        <iframe
          style={{ height: '100%', width: '100%' }}
          src={`${fetchUrl}?bncolors=${queryParam}`}
        ></iframe>
      )}
    </div>
  );
};

/** 
 * 
 * 
 * http://localhost:3003/activity/leagues/asd/12
 * export const newColors = {
  bg_system: '#455274',
  bg_text_primary: '#00205c',
  bg_text_secondary: '#7C9CB4',
  bg_text_teriaty: '#A6BCCC',
  bg_white: '#FFFFFF',
  bg_text_disabled: '#DBE4EB',
  bg_border_primary: '#DAE6F0',
  bg_border_seperator: '#E2E7EB',
  bg_background_primary: '#F3F7FA',
  bg_background_secondary: '#FAFCFD',
  bg_background_overlay: '#7F7F7F',
  bg_background_fields: '#EAF0F5',
  bg_error: '#e02020',
  tx_system: '#455274',
  tx_text_primary: '#00205c',
  tx_text_secondary: '#7C9CB4',
  tx_text_teriaty: '#A6BCCC',
  tx_white: '#FFFFFF',
  tx_text_disabled: '#DBE4EB',
  tx_border_primary: '#DAE6F0',
  tx_border_seperator: '#E2E7EB',
  tx_background_primary: '#F3F7FA',
  tx_background_secondary: '#FAFCFD',
  tx_background_overlay: '#7F7F7F',
  tx_background_fields: '#EAF0F5',
  tx_error: '#e02020',
  bg_system_gradient: '#37466b',
  t_green: '#24C875',
  b_green: '#E5F8EE',
};
*/