import { IconButton } from '@suid/material';
import SearchIcon from '@suid/icons-material/Search';

import { Component, Show } from 'solid-js';
import { findAddress, getVillageOrTown } from '../../lib/osm';
import { cloneDeep } from 'lodash';
import { useI18n } from '@solid-primitives/i18n';
import dispatch from '../../workers/dispatcher-main';

interface Props {
  target: () => any;
  putAction: string;
  putParamName: string;
}

const DisplayOrGetAddress: Component<Props> = ({
  target,
  putAction,
  putParamName,
}) => {
  const [t, { add, locale, dict }] = useI18n();

  const findClickHandler = async () => {
    const address = await findAddress(target().$.lon, target().$.lat, locale);
    const updatedTarget = cloneDeep(target());
    if (updatedTarget.extensions === undefined) {
      updatedTarget.extensions = {};
    }
    updatedTarget.extensions.address = address;
    const params: any = { id: target().id };
    params[putParamName] = updatedTarget;
    dispatch({
      action: putAction,
      params,
    });
  };

  return (
    <Show
      when={target().extensions?.address}
      fallback={
        <IconButton color='primary' onClick={findClickHandler}>
          <SearchIcon />
        </IconButton>
      }
    >
      <>{getVillageOrTown(target().extensions?.address)}</>
    </Show>
  );
};

export default DisplayOrGetAddress;