class Home
  extends React.Component
    <ContextRouter, State>{



  state = {
    loaded: false, //(1)
    color: queryAsMap(
  this.props.location.search
    )["color"],
    brand: queryAsMap(
  this.props.location.search
    )["brand"],
    brands: [], //(2)
    colors: [] //(2)
  };


  async componentDidMount()
  {

    this.setState({ //(3)
      brands: await ( //(4)
    await fetch('/api/brands')
      ).json(),

      colors: await ( //(4)
    await fetch('/api/colors')
      ).json()

    });

  }
}

type State = {
  color?: string, //(5)
  brand?: string, //(5)

  loaded: boolean, //(1)
  brands: Array<string>, //(2)
  colors: Array<string> //(2)
};

export default Home;

class Home(
  props: RouteResultProps<*>
) : RComponent
<RouteResultProps<*>, State>
(props) {
  init {
    state = State(

      color = queryAsMap(
        props.location.search
      )["color"],
      brand = queryAsMap(
        props.location.search
      )["brand"]


    )
  }

  override fun componentDidMount()
  {
    launch {
      updateState { //(3)
        brands = fetchJson( //(4)
          "/api/brands",
          StringSerializer.list
        )
        colors = fetchJson( //(4)
          "/api/colors",
          StringSerializer.list
        )
      }
    }
  }
}

class State(
  var color: String?, //(5)
  var brand: String? //(5)
) : RState {
var loaded: Boolean = false //(1)
lateinit var brands: List<String> //(2)
lateinit var colors: List<String> //(2)
}

private val serializer: JSON = JSON()

suspend fun <T> fetchJson( //(4)
  url: String,
  kSerializer: KSerializer<T>
): T {
  val json = window.fetch(url)
    .await().text().await()
  return serializer.parse(
    kSerializer, json
  )
}

type HomeHeaderProps = {
brands: Array<string>,
brand?: string,
onBrandChange: (string) => void,
colors: Array<string>,
color?: string,
onColorChange: (string) => void
}

const HomeHeader = ({
brands,
brand,
onBrandChange,
colors,
color,
onColorChange
}: HomeHeaderProps) => (
  <div>
    Brand:
    <Dropdown
      value={brand}
      onChange={e =>
        onBrandChange(e.value)
      }
      options={withDefault("all",
        brands.map(value => ({
      label: value, value: value
    })))}

    />
    Color:
    <Dropdown
      value={color}
      onChange={e =>
        onColorChange(e.value)
      }
      options={withDefault("all",
        colors.map(value => ({
      label: value, value: value
    })))}

    />
  </div>
);

function withDefault(
  label, options
) {
  options.unshift({
    label: label, value: null
  });
  return options;
}

private fun RBuilder.homeHeader(
brands: List<String>,
brand: String?,
onBrandChange: (String?) -> Unit,
colors: List<String>,
color: String?,
onColorChange: (String?) -> Unit
) {

  +"Brand:"
  dropdown(
    value = brand,
    onChange = onBrandChange,


    options = brands.map {
      SelectItem(
        label = it, value = it
      )
    } withDefault "all"
  ) {}
  +"Color:"
  dropdown(
    value = color,
    onChange = onColorChange,


    options = colors.map {
      SelectItem(
        label = it, value = it
      )
    } withDefault "all"
  ) {}

}

infix fun <T : Any>
  List<SelectItem<T>>.withDefault(
  label: String
) = listOf(
  SelectItem(
    label = label, value = null
  )
) + this

  render() {
    if (!this.state.loaded)
      return null;
    return (
      <HomeHeader
    brands={this.state.brands}
    brand={this.state.brand}
    onBrandChange={brand =>
this.navigateToChanged({brand})}
    colors={this.state.colors}
    color={this.state.color}
    onColorChange={color =>
this.navigateToChanged({color})}
      />
    );
  }

  navigateToChanged({
    brand = this.state.brand,
    color = this.state.color
  }: Object) { //(*)
    this.props.history.push(
"?brand=" + (brand?brand:"")
+ "&color=" + (color?color:""));
    this.setState({
      brand,
      color
    });

    this.loadCars()
    
  }

  override fun
    RBuilder.render() {
    if (!state.loaded) return


    homeHeader(
      brands = state.brands,
      brand = state.brand,
      onBrandChange = {
navigateToChanged(brand = it) },
      colors = state.colors,
      color = state.color,
      onColorChange = {
navigateToChanged(color = it) }
    )

  }

  private fun navigateToChanged(
    brand: String? = state.brand,
    color: String? = state.color
  ) {
    props.history.push(
"?brand=${brand.orEmpty()}"
+ "&color=${color.orEmpty()}")
    updateState {
      this.brand = brand
      this.color = color
    }
    launch {
      loadCars()
    }
  }

const HomeContent = (props: {
   cars: Array<Car>
}) => (
  <DataTable value={props.cars}>
    <Column header="Brand"
            body={rowData =>
      rowData["brand"]
            }/>
    <Column header="Color"
            body={rowData =>
      <span
    style={{
      color: rowData['color']
    }}>
        {rowData['color']}
      </span>
  }/>
    <Column header="Year"
            body={rowData =>
      rowData["year"]}
    />
  </DataTable>
);

private fun RBuilder.homeContent(
  cars: List<Car>
) {
  datatable(cars) {
    column(header = "Brand") {

      +it.brand
    }
    column(header = "Color") {

      span {
        attrs.style = js {
          color = it.color
        }
        +it.color
      }
    }
    column(header = "Year") {

      +"${it.year}"
    }
  }
}