import ReactDOMClient from 'react-dom/client'
import * as ReactRouterDOM from 'react-router-dom'
import React,{ StrictMode,useEffect,useState } from 'react'

import $$,{ UUID } from 'jmini'

import {
  Config,
  Row,
  Card,
  useRouterEffect,
  LaunchReactApp,
  Input,
  Box,
  Anchor,
  pageRouter,
  Button,
  Plate,
  Column,
  Sheet,
  Text,
  FAI,
  Accordion,
} from 'amotify'

import '../../dist/@styles/style.css'

import {
  DesignBook
} from './designBook'

let Test = () => {
  let [ val_value,set_value ] = useState( <>
    Hello World <br />
    Hello World <br />
    Hello World <br />
    Hello World
  </> )

  let accordionID = 'accordionIDD'

  return <Box>
    {/* <Plate size='S'>
      <Column
        padding={ 2 }
      >
        <Input.TextField.Money.JPY
          label='金額'
          form='test'
          name='price'
          required
          allowDecimals
          onUpdateValidValue={ value => {
            console.log( value,Number( value ) );
          } }
        />
        <Button.Sub
          submitOption={ {
            formName: 'test',
            callback: ( data ) => {
              console.log( data )
            }
          } }
        >
          Submit
        </Button.Sub>
        <Button.Sub.L
          backgroundColor='nega'
        >
          Sub L
        </Button.Sub.L>
        <Button.Link.Plain
          backgroundColor='nega'
          padding={ 3 }
        >
          Link
        </Button.Link.Plain>
      </Column>
    </Plate> */}
    <DesignBook
    />
  </Box>
}

$$.scope( () => {
  let root = document.createElement( 'sample-app' )
  root.id = 'sampleAppBody'
  document.body.append( root )

  Config.launch( {
    appRoot: root,
    roundness: $$.localStrage.get( 'prf.roundness' ) ?? 4,
    themeColor: 'battery',
    darkMode: $$.localStrage.get( 'prf.darkMode' ) || 'auto',
  } )

  const AppRouter = () => {
    let useLocation = ReactRouterDOM.useLocation()
    let useNavigate = ReactRouterDOM.useNavigate()
    useEffect( () => {
      pageRouter.setPushEffect( url => {
        if ( url.match( /^#/ ) ) {
          console.log( url )
          console.log( window.location.pathname )
          // useNavigate( url )
          return
        }
        useNavigate( url )
      } )
      pageRouter.setBackEffect( () => {
        useNavigate( -1 )
      } )
    },[] )
    useRouterEffect( {
      pathname: useLocation.pathname
    } )

    return <ReactRouterDOM.Routes>
      <ReactRouterDOM.Route key={ '*' } path={ '*' } element={ <Test /> } />
    </ReactRouterDOM.Routes>
  }

  ReactDOMClient.createRoot( root ).render( <StrictMode>
    <LaunchReactApp>
      <ReactRouterDOM.BrowserRouter>
        <AppRouter />
      </ReactRouterDOM.BrowserRouter>
    </LaunchReactApp>
  </StrictMode> )
} )

export { }